Vue_常用指令

常用指令

1、插值表达式

{{}}
当模型中的数据发生改变时，视图中的数据也发生相应的改变

2、v-text

将一个变量的值渲染到指定的元素中

3、v-html

输出真正的HTML元素

4、v-model

实现数据双向绑定

{{value}}

5、v-bind

绑定页面中元素的属性

6、v-if和v-show

v-if
作用：判断是否加载固定的内容，如果是，就加载，如果否就不加载
语法：v-if=“判断表达式”

v-show
作用：判断是否加载内容
语法：v-show=“判断表达式”

相同点：都可以实现对于一个元素的显示和隐藏操作
不同点：v-if是将元素添加或移出dom树模型中（节点增删），v-show只是在这个元素属性加上“display:none”而已

v-if有更高的切换消耗，安全性高，v-show初始化消耗大一点，所以，如果需要频繁切换并对安全性没有要求时，可以使用v-show。如果在运行中，条件不可能改变的话，使用v-if会好一点。

7、v-for

作用：控制HTML元素中的循环
语法：v-for="item in 集合"

{{item.value}}

8、v-on

作用：对页面中的事件进行绑定
语法：v-on:事件类型=“监听器”
缩写：@事件类型=“监听器”

点击事件

点击事件