Vue详细介绍模板语法和过滤器的使用！

Posted 2022-07-02 lishixiang-007

表达式
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