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,其中AB中的每一个值,若B为数组,则A表示其中的没一个元素,若B为对象,则A可以表示B中的没一个值,通常配合<li>使用:

  1. {{i.value}}

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

  • {{value}}

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

  • {{key}} -> {{value}}
  • 第三个参数作为索引:

  • {{index}} : {{key}} -> {{value}}
  • 另外也可以迭代整数:

  • {{n}}
  • 范围是从0到10,包含0与10。

    3 计算属性

    3.1 computed

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

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

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

    {{reverse}}

    这里声明了一个计算属性reverse,提供的函数作为属性reversegetterreverse依赖于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)

    输入如下:
    在这里插入图片描述