1 条件判断

1.1 一般if

条件判断应用v-if指令：

<div id="app">    <p v-if="seen">看到了</p>;</div>

<script>new Vue({    el:'#app',    data:{        seen:true    }})</script>

v-if指令依据表达式的值（在这里是seen）决定是否插入<p>

1.2 if-else

能够应用v-else增加一个else块：

<div id="app">    <div v-if="Math.random()>0.5">1</div>    <div v-else>2</div></div>

<script>new Vue({    el:'#app'})</sctipt>

也能够减少v-else-if：

<div id="app">    <div v-if="value === 'A'">A</div>    <div v-else-if="value === 'B'">B</div>    <div v-else-if="value === 'C'">C</div>    <div v-else>D</div></div>

<script>new Vue({    el:'#app',    data:{        value:'A'    }})</script>

v-else以及v-else-if必须跟在v-if或者v-else-if之后。

1.3 v-show

也能够依据v-show展现元素：

<div id="app">    <h1 v-show="ok">Test</h1></div>

<script>new Vue({    el:'#app',    data:    {        ok:true    }})</script>

2 循环

循环应用v-for，格局为：A in B，其中A是B中的每一个值，若B为数组，则A示意其中的没一个元素，若B为对象，则A能够示意B中的没一个值，通常配合<li>应用：

<div id="app">    <ol>        <li v-for="i in arr">{{i.value}}</li>    </ol></div>

<script>new Vue({    el:'#app',    data:    {        arr:        [            {value:'value1'},            {value:'value2'},            {value:'value3'}        ]    }})</script>

另外也能够通过一个对象的属性来迭代数据：

<div id="app">    <ul>        <li v-for="value in obj">{{value}}</li>    </ul></div>

<script>new Vue({    el:'#app',    data:    {        obj:        {            value1:'value1',            value2:'value2',            value3:'value3'        }    }})</script>

也能够提供第二个参数作为键名：

<li v-for="(value,key) in obj">{{key}} -> {{value}}</li>

第三个参数作为索引：

<li v-for="(value,key,index) in obj">{{index}} : {{key}} -> {{value}}</li>

另外也能够迭代整数：

<li v-for="n in 10">{{n}}</li>

范畴是从0到10，蕴含0与10。

3 计算属性

3.1 computed

计算属性相似与办法调用，比方之前的反转字符串的例子：

{{message.split('').reverse().join('')}}

这样看起来很长，能够应用计算属性进行简化：

<div id="app">    <p>{{reverse}}</p></div>

<script>new Vue({    el:'#app',    data:    {        message:'Test'    },    computed:    {        reverse:function()        {            return this.message.split.reverse().join('')        }    }})</script>

这里申明了一个计算属性reverse，提供的函数作为属性reverse的getter，reverse依赖于message，当message更新时，reverse也会更新。

3.2 computed与methods

能够应用methods来代替computed：

methods:{    reverse:function()    {        return this.message.split.reverse().join('')    }}

对应只须要减少一对()：

<div id="app">    <p>{{reverse()}}</p></div>

computed基于它的依赖缓存，只有相干依赖批改时才会从新取值，而应用methods，在从新渲染时函数总会从新调用执行。

3.3 setter

computed默认只有 getter，不过也能够自行提供setter：

var vm = new Vue({    el:'#app',    data:    {        name:'test',        url:'https://www.test.com'    },    computed:    {        site:        {            get:function()            {                return this.name + ' ' + this.url;             },            set:function(value)            {                var values = value.split(' ')                this.name = values[0]                this.url = values[1]            }        }    }})vm.site = 'test2 https://www.test2.com'document.write('name:'+vm.name)document.write('<br>')document.write('url:'+vm.url)

输出如下：