Vue支持动态渲染文本，即在修改属性的同时，实时渲染文本内容。同时为了提高渲染效率，也支持只渲染一次，即第一次渲染出文本后，文本内容不再跟随属性值的变化而变化。
实时渲染
<div> <h2>文本 - 实时渲染</h2> <input type="text" v-model="msg" /> <span>{{ msg }}</span> </div>
v-model 指令将 input 标签的值动态绑定到属性 msg 上，通过 {{ msg }} 表达式显示在页面上。当修改文本框内容时，后面的页面内容将实时变化并与文本框内容保持一致。
一次渲染
<div> <h2>文本 - 一次渲染</h2> <input type="text" v-model="msg_once" /> <span v-once>{{ msg_once }}</span> </div>
在 vm 对象里添加属性
require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) { var vm = new Vue({ el: "#app", data: { msg_once: "once..." } }); });
页面第一次加载完成时，页面显示once...，当 span 标签加上 v-once 指令后，无论如何修改文本框内容，页面内容都不会变化。
HTML代码渲染
某些情况下，页面需要动态的插入一段HTML代码
在 vm 对象里添加属性，属性值为一段HTML代码
require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) { var vm = new Vue({ el: "#app", data: { html: "<span>This is a html tag.</span>" } }); });
页面元素添加 v-html 指令后，元素对应位置将显示出属性值内的对应元素
<div> <h2>文本 - HTML</h2> <div v-html="html"></div> </div>
二、表达式
上文中已经介绍过的 {{ msg }} 就是一个简单的表达式。除此之外，还有一些常用的表达式写法。
运算表达式
在上述简单表达式中可以使用运算符，Vue会将运算后的结果渲染在页面上
<div> <h4>运算表达式</h4> <span v-pre>{{ Number(number)+ }}：</span> <input v-model="number" type="text" /> <span>运算结果：{{ Number(number)+ }}</span> </div>
在文本框中输入数字，Vue通过表达式内的运算符实时计算出结果，并显示出来。因为文本框内容为字符串，所以在表达式中需要对 number 属性进行类型转换成数字。
三元运算表达式
Vue支持在表达式内使用三元运算符
<div> <h4>三元运算表达式</h4> <span v-pre>{{ ok ? 'YES' : 'NO' }}：</span><span>{{ ok ? 'YES' : 'NO' }}</span> </div>
Javascript方法
表达式内也可以使用Javascript支持的基础方法，Vue会动态执行方法并显示最终结果
<div> <h4>Javascript方法</h4> <span v-pre>{{msg_once.split('').reverse().join('')}}：</span><span>{{msg_once.split('').reverse().join('')}}</span> </div>
这个例子是将 msg_once 属性值的字符进行倒序排列后重新组合起来。
三、过滤器
过滤器经常用来进行内容的格式化显示。Vue支持自定义过滤器
首先要在 vm 对象里增加过滤器方法
require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) { var vm = new Vue({ el: "#app", data: { filter_msg: 'base' }, filters: { filter: function (value) { if (!value) { return ''; } return value + '_filter1'; }, filter2: function (value) { if (!value) { return ''; } return value + '_filter2'; }, filter_arg: function (value, arg1, arg2) { if (!value) { return ''; } return value + ' ' + arg1 + ' ' + arg2; } } }); });
所有的过滤器方法都要定义在 filters 属性里，方法的第一个参数值就是传递进来需要被处理的原始内容，方法的返回值即时处理过的新内容。
自定义的过滤器使用方法如下
<div> <h4>单一过滤器</h4> <span v-pre>{{ filter_msg | filter1 }}：</span><span>{{ filter_msg | filter1 }}</span> </div>
上面的例子中，过滤器通过管道符号“|”与需要处理的内容进行连接，将 filter_msg 属性值经过 filter1 过滤器，在后面追加内容并显示。
同时，Vue也支持连接多个过滤器