<div> <h4>串联过滤器</h4> <span v-pre>{{ filter_msg | filter1 | filter2 }}：</span><span>{{ filter_msg | filter1 | filter2 }}</span> </div>
这个例子中，通过管道符号“|”，可以连接多个过滤器，每前一个过滤器的输出将作为后一个过滤器的输入，直到显示最终结果。
当过滤器有多个参数时，Vue也支持带参数调用
<div> <h4>过滤器参数</h4> <span v-pre>{{ filter_msg | filter_arg('arg1', 'arg2') }}：</span><span>{{ filter_msg | filter_arg('arg1', 'arg2') }}</span> </div>
四、常用指令
指令就是将一些特殊行为应用到页面DOM元素的特殊属性。Vue的内置指令都是一些带有 v- 前缀的特殊属性。
常用的指令如下：
v-bind
v-on
v-for
v-if
v-else-if
v-else
v-show
v-bind
该指令用来给元素绑定一个或多个特性
<div> <h>v-bind（属性绑定）</h> <span v-pre>可用的按钮(v-bind:disabled="!btn_enabled")：</span><button v-bind:disabled="!btn_enabled" type="button">可以点击的按钮</button><br/> <span v-pre>不可用的按钮(v-bind:disabled="btn_enabled")：</span><button v-bind:disabled="btn_enabled" type="button">不可点击的按钮</button><br/> <span v-pre>缩写(:disabled="!btn_enabled")：</span><button :disabled="!btn_enabled" type="button">可以点击的按钮</button> </div>
require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) { var vm = new Vue({ el: "#app", data: { btn_enabled: true } }); });
在上面的例子里，给 vm 对象增加一个名称为 btn_enabled 的布尔属性，在按钮中通过 v-bind:disabled="btn_enabled" 动态给 disabled 属性赋值
页面上可以看到“不能点击的按钮”动态增加了一个 disabled 属性。同时 v-bind:disabled="!btn_enabled" 也可以简写成 :disabled="!btn_enabled" 。
v-on
该指令绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句。用在普通元素上时，只能监听原生 DOM 事件。在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性。
在 vm 对象的 methods 属性里添加自定义方法
require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) { var vm = new Vue({ el: "#app", methods: { btn_click: function () { console.log("button click!"); }, btn_clickWithEvent: function($event){ console.log($event); }, btn_clickWithMsg: function (msg) { console.log("Message is:" + msg); } } }); });
通过属性 v-on:click="btn_click" 在按钮上添加 click 事件
<div> <h4>v-on（事件绑定）</h4> <span v-pre>点击事件(v-on:click="btn_click")：</span><button v-on:click="btn_click" type="button">点我！</button><br/> <span v-pre>带事件参数的点击事件(v-on:click="btn_clickWithEvent($event)")：</span><button v-on:click="btn_clickWithEvent($event)" type="button">点我！</button><br/> <span v-pre>带自定义参数的点击事件(v-on:click="btn_clickWithMsg('Hello world!')")：</span><button v-on:click="btn_clickWithMsg('Hello world!')" type="button">点我！</button><br/> <span v-pre>缩写(@click="btn_click")：</span><button @click="btn_click" type="button">点我！</button> </div>
页面效果如下
v-on指令也支持缩写，用@符号代替，比如： @click="btn_click" 。
v-for
该指令用来基于源数据多次渲染元素或模板块。
在 vm 对象里添加一个数组类型的属性 books
require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) { var vm = new Vue({ el: "#app", data: { books: ["深入浅出node", "C#本质论", "编程珠玑"] } }); });
通过 v-for 指令实现一个简单列表
<div> <h4>v-for（循环）</h4> <ul> <li v-for="item in books"> {{ item }} </li> </ul> </div>
页面效果如下
v-for 属性值是一个 item in expression 结构的表达式，其中 item 代表 expression 运算结果的每一项。最终的HTML代码如下
v-if、v-else-if、v-else
条件渲染指令，通过表达式结果的真假来插入和删除元素。 v-if 可以单独使用，而 v-else-if 、 v-else 必须和 v-if 一起使用。
下面是一个简单用法的例子