Vue詳細介紹模板語法和過濾器的使用！

表達式
{{ XXX }}
使用過濾器
{{ XXX | yyy}}
使用多個過濾器
{{ XXX | yyy | yyy1}}
過濾器帶參數
{{ XXX | yyy(123,"zhuiszhu") }}

動態屬性:
<img v-bind:src="xxx" />
或 <img :src="xxx" />

綁定事件
<a v-on:click="xxx" />
或 <a v-on:click="xxx($event)" />
或 <a v-on:click="xxx($event,123)" />
或 <a v-on:click="xxx(123)" />

或 <a @click="xxx" />

指令:
v-if: 元素是否存在
v-else-if:
v-else 用法同js 的 if else if 及 else
注意 在使用了這幾個指令的標簽之間 不能存在其他元素

v-show: 元素是否顯示

v-for: 循環迭代

<li v-for="item in list"></li>
或者
<li v-for="item in {name:'zhuiszhu',age:18}">
{{item}} ===> item值為 : zhuiszhu , 18
</li>
或者
<li v-for="item in 10"></li>
此時 item 值為: 1,2,3,4,5,6,7,8,9,10

獲取索引
<li v-for="(item,i) in list"></li>

v-model: 數據雙向綁定

 

 

全局過濾器

Vue.filter("name",function(value,sta1?,sta2?....){
return newValue
})

局部過濾器
let abc = function(value,sta1?,......){
return newValue
}

{
data: ...,
....,
fileters : {
name : abc
}
}