一、插值
1、双大括号
<span>{{text}}</span>
2、作为属性不用{{}},但要用:绑定属性
<img :src="item.imagepath">
3、 v-once 指令,一次性地插值,当数据改变时,插值处的内容不会更新。
<span v-once>{{ msg }}</span>
4、纯html
<p v-html="contentData.content"></p>
5、javascript表达式
<div v-bind:id="'list-' + id"></div>
6、从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:
<a v-bind:[attributeName]="url"> ... </a>
这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。例如,如果你的 Vue 实例有一个 data 属性 attributeName,其值为 “href”,那么这个绑定将等价于 v-bind:href。
二、过滤器(改变文本格式)
Vue 2.x 中,过滤器只能在 mustache 绑定和 v-bind
表达式(从 2.1.0 开始支持)中使用。
在组件内部用filters:{ 过滤器名:function(value){ return … } }
调用过滤器:数据 | 过滤器名
1、局部过滤器
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
2、全局过滤器
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
当全局过滤器和局部过滤器重名时,会采用局部过滤器。
3、过滤器可串联
{{ message | filterA | filterB }}
在这个例子中,filterA 被定义为接收单个参数的过滤器函数,表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB,将 filterA 的结果传递到 filterB 中。
4、过滤器可接收参数:
{{ message | filterA('arg1', arg2) }}
这里,filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串 ‘arg1’ 作为第二个参数,表达式 arg2 的值作为第三个参数。
<h1>{{msg | filterA('hehe')}}</h1>
data(){
return{
msg:'hello'
}
}
vue.filter('filterA',function(value,arg1){
return arg1+' '+value.split('').reverse().join('');//翻转
}
结果是:hehe olleh
三、内部指令
1、v-bind 绑定属性
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
2、v-on 绑定事件
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
3、v-if
1)根据表达式 的真假来移除/插入元素。true才渲染
<p v-if="false">hbjhg</p>
4、v-show
一直存在,true才显示
<p v-show='false></p>
6、v-for
哪个要循环就绑定哪个
<ul>
<li v-for='(iten,index) in info' :key='index' >{{item}}</li>
</ul>