注：ECMAScript5无法检测到新属性添加到一个对象上或者在对象上删除。要处理这种情况，Vue.js增加了三种方法：$add(key,value)、$set(key,value)、$delete(key,value)，这些方法可以用来添加和删除属性，同时触发视图更新。
内置过滤器
1.filterBy(0.12版本)
实现如图所示：
<div> <input v-model="searchText"/> <ul> <li v-for="user in users | filterBy searchText in 'name' ">{{user.name}}</li> </ul> </div> <script type="text/javascript"> new Vue({ el: '#example', data: { users:[ { name:'快车', tag:'1' }, { name:'出租车', tag:'2' }, { name:'顺风车', tag:'3' }, { name:'专车', tag:'4' } ] } }) </script>
在输入框中输入'专车'，得到如图所示的结果：
2.orderBy(0.12版本)
实现降序排列，例：
<div> <ul> <li v-for="user in users | orderBy field reverse">{{user.name}}</li> </ul> </div> <script type="text/javascript"> new Vue({ el: '#example', data: { field:'tag', reverse:-1, users:[ { name:'出租车', tag:'2' }, { name:'快车', tag:'1' }, { name:'顺风车', tag:'3' }, { name:'专车', tag:'4' } ] } }) </script>
v-for
使用$index来获得相应的数组索引。
<div> <ul> <li v-for="item of items"> {{$index}} - {{parentMessage}} - {{item.msg}} </li> </ul> </div> <script type="text/javascript"> new Vue({ el: '#example', data: { parentMessage:'滴滴', items:[ {msg:'顺风车'}, {msg:'专车'} ] } }) </script>
注：vuejs1.0.17及以后低版本支持of分隔符，更接近JavaScript遍历器语法。
有时我们可能想重复一个包含多个DOM元素的块，可以使用<template>,如：
<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li></li> </template> </ul>
v-for也支持整数
代码如下：
<div> <span v-for="n in 10">{{ n }} </span> </div>
或者
<div> <span v-for="n in 10">{{ $index }} </span> </div>
v-text
v-text指令可以更新元素的textContent.
<span v-text="msg"></span><br/> <span>{{msg}}</span>
得到的结果一样。
v-html
v-html指令更新元素的innerHTML。
<div> <p v-html="html"></p> <p>{{{html}}}</p> </div> <script type="text/javascript"> new Vue({ el: '#example', data: { html:'<p>效果一样</p>' } }) </script>
注：不建议在网站上直接动态渲染任意HTML片段，很容易导致XSS攻击。
v-bind
v-bind指令用于响应更新HTML特性，将一个或者多个attribute，或者一个组件prop动态绑定到表达式。v-bind可以简写为：
<!-- 完整语法 --> <a v-bind:href="url" ></a> <!-- 缩写 --> <a :href="url" ></a> <!-- 完整语法 --> <button v-bind:disabled="someDynamicCondition">Button</button> <!-- 缩写 --> <button :disabled="someDynamicCondition">Button</button>
在绑定class或者style时，支持其他类型的值，如数组或对象。如：
<div> <div :class="[classA,{classB:isB,classC:isC}]"></div> </div> <script type="text/javascript"> new Vue({ el: '#example', data: { classA:'A', isB:false, isC:true } }) </script>
结果如图：
如果没有参数时，可以绑定到一个对象。注意，此时class和style绑定不支持数组和对象（对象key会转换为小写）。代码如下：