Vue学习笔记（二）

1 条件判断

1.1 普通if

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

    
看到了
;

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

1.2 if-else

可以使用v-else添加一个else块：

    
1
    
2

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

1.3 v-show

也可以根据v-show展示元素：

    
Test

2 循环

循环使用v-for，格式为：A in B，其中A是B中的每一个值，若B为数组，则A表示其中的没一个元素，若B为对象，则A可以表示B中的没一个值，通常配合<li>使用：

    

        
{{i.value}}
    

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

    

        
{{value}}
    

也可以提供第二个参数作为键名：

{{key}} -> {{value}}

第三个参数作为索引：

{{index}} : {{key}} -> {{value}}

另外也可以迭代整数：

{{n}}

范围是从0到10，包含0与10。

3 计算属性

3.1 computed

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

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

这样看起来很长，可以使用计算属性进行简化：

    
{{reverse}}

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

3.2 computed与methods

可以使用methods来代替computed：

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

对应只需要增加一对()：

    
{{reverse()}}

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('
')
document.write('url:'+vm.url)

输入如下：