v-text:
- 某些情况下 和 {{}}是等价的
- 还有一种情况是
<h1 id="app1" v-text="'今天是'+year+'年'+month+'月'"></h1> var app1 = new Vue({ el : "#app1", data : { year : new Date().getFullYear(), month : new Date().getMonth()+1 } })
v-html:
可以把html标签渲染出来,用于富文本的展示
v-pre:
加上这个属性,就不再编译这个标签和它的子标签了
v-cloak:
有一个很有意思的作用,就是 {{}}有时候会显示在页面上,然后一阵闪烁后才会变成值,有了这个东西后,就避免了这种
情况的出现了
<style>
[v-cloak]{
display:none;
}
</style>
<div id="app" v-cloak>
<div>
{{message}}
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
message:'hello world'
}
})
</script>
v-once:
v-once 关联的实例只会被渲染一次,即使实例发生改变也不会再次被渲染,这可以用于优化性能
v-if:
if 判断语句,为true 就显示
<a v-if="OK">Yes</a>
Tips:
可以用到 <template>中就可以通过判断来决定是否显示template下面的子标签元素
并且 template 标签不显示
v-else:
跟在 v-if 元素后面
v-else-if:
用于多条件选择的情况
v-show:
也是根据条件判断是否进行渲染
如果需要非常频繁的切换条件,就使用 v-show,
但是如果条件变化比较稳定,就使用v-if
v-for:
根据遍历数组来进行渲染
v-for="item in items"
还可以添加索引了
v-for="(item,index) in items"
还可以取整数了
v-for="n in 10"
v-for 也可以应用在 template 中
还可以遍历对象的属性了
<ul id="app" class="demo">
<li v-for="value in object">
{{value}}
</li>
</ul>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
object:{
text:'text1',
number:1
}
}
})
</script>
也可以添加第二个参数为键名:
<ul id="app" class="demo">
<li v-for="(key,value) in object">
{{key}}: {{value}}
</li>
</ul>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
object:{
text:'text1',
number:1
}
}
})
</script>
还能添加索引:
添加上第三个参数就可以了。
key:
管理可复用的元素
元素上没有 key 的时候,就不会重新渲染,只会替换这个元素的部分内容
当元素上有 key 的时候,就会重新渲染
数组更新方法:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
确定索引上的数值可以用如下方法:
Vue.set(arr1,indexOfItem,newValue)
arr1.splice(indexOfItem,1,newValue)
更改数组长度
arr1.splice(newLength)
往对象里面添加属性
Vue.set(vm.message,'text2','world')
添加多个属性可以使用 Object.assign()或_.extend()
this.message = Object.assign({},this.message,{
text2: 'world',
text3:'!'
})
在 v-for 里面添加 v-if
可以在每次遍历的时候来一次判断