Vue.js模板语法

1.v-if指令将根据表达式的seen的值得真假来插入/移除

元素

look

2.v-bind指令用于响应式地更新HTML特性,以下将href和url绑定在了一起

...
...            //v-bind的特定缩写形式

3.v-on指令,它用于监听事件

...
...       //v-on的特定缩写形式

4.缓存:我们可以将同一个函数定义为一个方法,而不是一个计算属性,两种方式的最终结果是完全相同的。然而,不同的是计算机属性是基于他们的依赖进行缓存的。意味着下面的不是响应式依赖:

computed:{
    now:function(){
        return Date.now()
    }
}

5.对象语法

我们可以v-bind:class = Obj一个对象,以动态地切换class。我们可以在这儿绑定一个返回对象的计算属性,这是一个强大且常用的属性。

data:{
    isActive : true,
    error : null
},
computed:{
    object:function(){
        return {
            active:this.isActive && !this.error,
            'text-danger':this.error && this.error.type ==='fatal'
        }
    }
}

6.数组语法

把一个数组传给v-bind:class,以应用一个class列表。

同时也可以在数组语法中使用对象语法

7.绑定内联样式,包括对象语法、数组语法,使用对象语法的时候,尽量直接绑定到一个样式模板上,这会让模板更清晰。

使用数组语法时,会将多个样式对象应用到同一个元素上。

8.条件渲染

Yes

No

当想把v-if作用的多个元素上时,可以使用