Vue_常用指令

常用指令

1、插值表达式

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

2、v-text

将一个变量的值渲染到指定的元素中
<h1 v-text="title"><h1>

3、v-html

输出真正的HTML元素
<div v-hmtl="html"><div>

4、v-model

实现数据双向绑定
<input type="text" v-model="value" />
<span>{{value}}</span>

5、v-bind

绑定页面中元素的属性
<a v-bind:href="url"></a>
<a :href="url"></a>

6、v-if和v-show

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

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

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

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

7、v-for

作用：控制HTML元素中的循环
语法：v-for="item in 集合"
<li v-for="item in items">{{item.value}}</li>

8、v-on

作用：对页面中的事件进行绑定
语法：v-on:事件类型=“监听器”
缩写：@事件类型=“监听器”
<li v-on:click="myClick">点击事件</li>
<li @click="myClick">点击事件</li>