Vue的内置指令
Posted 橘猫吃不胖～
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue的内置指令相关的知识，希望对你有一定的参考价值。
Vue内置指令
- 1 v-show：根据表达式的真假值来显示和隐藏元素
- 2 v-html：插入标签
- 3 v-text：在元素当中插入值
- 4 v-if和v-else：根据表达式的真假值来动态插入和移除元素
- 5 v-for：根据变量的值来循环渲染元素
- 6 v-bind：绑定元素的属性并执行相应的操作
- 7 v-on：监听元素事件，并执行相应的操作
- 8 v-model：实现了数据和视图的双向绑定
- 9 v-once：让元素或组件只渲染一次
- 10 v-pre：跳过这个元素和它的子元素的编译过程
- 11 v-cloak：解决初始化慢而导致页面闪动
- 12 自定义指令
1 v-show：根据表达式的真假值来显示和隐藏元素
v-show根据表达式的真假值来显示和隐藏元素。
在下面的示例中，第一个p标签不设置该属性，第二个p标签设置v-show为true，第三个p标签设置v-show为false，最后的结果是显示前两个p标签，第三个不显示，示例代码如下：
<div id="app">
<p>我是橘猫吃不胖</p>
<p v-show="show">AAAAA</p>
<p v-show="hide">BBBBB</p>
</div>
<script>
var vm = new Vue(
el: '#app',
data:
show: true, // 显示AAAAA
hide: false // 隐藏AAAA
)
</script>
除此之外，可以动态的修改v-show的属性值，示例代码如下：
<div id="app">
<p>我是橘猫吃不胖</p>
<p v-show="show">AAAAA</p>
<p v-show="hide">BBBBB</p>
</div>
<script>
var vm = new Vue(
el: '#app',
data:
show: true,
hide: false
)
// 每隔1秒修改hide的值，达到在屏幕上闪烁的效果
window.setInterval(function ()
vm.hide = !vm.hide
, 1000)
</script>
2 v-html：插入标签
v-html会插入标签。
示例：点击按钮后，插入一个p标签，再次点击按钮后p标签消失
<div id="app">
<button @click="show">点击</button>
<div v-show="isShow" v-html="p"></div>
</div>
<script>
var vm = new Vue( // 创建实例
el: '#app',
data:
isShow: false, // 设置p标签默认是隐藏的
p: "<p>橘猫吃不胖</p>" // 设置要插入的p标签
,
methods:
show: function () // 此处的show是给按钮绑定的事件
this.isShow = !this.isShow;
)
</script>
3 v-text：在元素当中插入值
v-text可以在元素当中插入值。
示例：初始时不给h1标签中设置值，而是在data中定义值，页面上会正常显示定义的值
<div id="app">
<!-- 设置一个h1标签，但是并不设置值 -->
<h1 v-text="msg"></h1>
</div>
<script>
var vm = new Vue(
el: '#app',
data:
msg: "橘猫吃不胖" // 定义要显示在h1标签中的值
)
</script>
4 v-if和v-else：根据表达式的真假值来动态插入和移除元素
v-if和v-else可以根据表达式的真假值来动态插入和移除元素。
示例：根据不同的表达式真假值显示不同的效果，当role设置为0的时候，显示超级管理员
<div id="app">
<p v-if="role == 0">超级管理员</p>
<p v-else-if="role == 1">普通管理员</p>
<p v-else>账户已停用</p>
</div>
<script>
var vm = new Vue(
el: "#app",
data:
role: 0 // 设置role的值
)
</script>
当设置role为1时，显示普通管理员
<div id="app">
<p v-if="role == 0">超级管理员</p>
<p v-else-if="role == 1">普通管理员</p>
<p v-else>账户已停用</p>
</div>
<script>
var vm = new Vue(
el: "#app",
data:
role: 1 // 设置role的值
)
</script>
当role不为0或者1时，显示账户已停用
<div id="app">
<p v-if="role == 0">超级管理员</p>
<p v-else-if="role == 1">普通管理员</p>
<p v-else>账户已停用</p>
</div>
<script>
var vm = new Vue(
el: "#app",
data:
role: 3 // 设置role的值
)
</script>
5 v-for：根据变量的值来循环渲染元素
v-for可以根据变量的值来循环渲染元素。
示例：v-for指令遍历数组
<div id="app">
<span v-for="i in arr"> i </span>
</div>
<script>
var vm = new Vue(
el: "#app",
data:
arr: [11, 22, 33, 44] // 定义arr数组
)
</script>
示例：v-for遍历数组及数组中元素的索引
<div id="app">
<span v-for="(i , index) in arr"> index : i </span>
</div>
<script>
var vm = new Vue(
el: "#app",
data:
arr: [11, 22, 33, 44] // 定义arr数组
)
</script>
示例：v-for指令遍历对象
<div id="app">
<span v-for="i in obj"> i </span>
</div>
<script>
var vm = new Vue(
el: "#app",
data:
obj: // 定义对象
"a": 1,
"b": 2,
"c": 3
)
</script>
示例：v-for遍历对象的属性名及属性值
<div id="app">
<span v-for="(item,key) in obj">
key : item
</span>
</div>
<script>
var vm = new Vue(
el: "#app",
data:
obj: // 定义对象
"a": 1,
"b": 2,
"c": 3
)
</script>
示例：v-for遍历对象的索引、属性名及属性值
<div id="app">
<span v-for="(item,key,index) in obj">
index — key : index
</span>
</div>
<script>
var vm = new Vue(
el: "#app",
data:
obj: // 定义对象
"a": 1,
"b": 2,
"c": 3
)
</script>
示例：v-for遍历对象数组
<div id="app">
<span v-for="item in obj">
item
</span>
</div>
<script>
var vm = new Vue(
el: "#app",
data:
obj: [
name: "张三", age: 20 ,
name: "李四", age: 21 ,
name: "王五", age: 22
]
)
</script>
示例：v-for指令遍历对象数组的具体内容
<div id="app">
<span v-for="item in obj">
item.name
item.age
</span>
</div>
<script>
var vm = new Vue(
el: "#app",
data:
obj: [
name: "张三", age: 20 ,
name: "李四", age: 21 ,
name: "王五", age: 22
]
)
</script>
示例：v-for遍历常量
<div id="app">
<span v-for="i in 5">
i
</span>
</div>
<script>
var vm = new Vue(
el: "#app"
)
</script>
6 v-bind：绑定元素的属性并执行相应的操作
v-bind可以绑定元素的属性并执行相应的操作。
示例：为a标签绑定href属性
<div id="app">
<a v-bind:href="link">去百度</a>
</div>
<script>
var vm = new Vue(
el: "#app",
data:
link: "https://baidu.com"
)
</script>
点击链接可以进行页面的跳转。
7 v-on：监听元素事件，并执行相应的操作
v-on可以监听元素事件，并执行相应的操作。
示例：v-on绑定一个事件
<div id="app">
<button v-on:click="myClick">点击</button>
</div>
<script>
var vm = new Vue(
el: "#app",
methods:
myClick: function ()
console.log("点击了按钮");
)
</script>
示例：v-on绑定多个事件
<div id="app">
<button v-on="
click: myClick,
mouseenter: mouseEnter,
mouseleave: mouseLeave
">点击</button>
</div>
<script>
var vm = new Vue(
el: "#app",
methods:
myClick: function ()
console.log("点击了按钮");
,
mouseEnter: function ()
console.log("鼠标进入按钮");
,
mouseLeave: function ()
console.log("鼠标移出按钮");
)
</script>
8 v-model：实现了数据和视图的双向绑定
v-model可以实现数据和视图的双向绑定。
示例：与input进行绑定，选择性别后在下方显示选择
<div id="app">
<p>请选择你的性别：</p>
<input type="radio" value="男" v-model="gender">男
<input type="radio" value="女" v-model="gender">女
<p>您选择的性别是： gender </p>
</div>
<script>
var vm = new Vue(什么是vue.js中的自定义指令？