v-once指令
v-once指令可以让元素只渲染一次，渲染后，无论数据怎么改变，该元素也不会发生变化。
<div id="app">
<p v-once>{{name}}</p>
<p>{{name}}</p>
</div>
<script>
let vue=new Vue({
el:"#app",
data:{
name:"王大胜"
}
})
</script>
v-cloak指令
vue渲染数据原理
- 先将未绑定数据的元素展示在页面上
- 将元素和数据进行绑定
- 将传递后的元素再次展现到页面上
v-cloak可以先隐藏为绑定的元素，等到元素传递完数据后，再呈现。
不过需要配合css使用，先用display将元素隐藏
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>{{name}}</p>
</div>
<script>
let vue=new Vue({
el:"#app",
data:{
name:"王大胜"
}
})
</script>
v-text指令和v-html指令
在vue中，使用插值的方式无法插入html元素。
v-text会覆盖原来的元素内容，不过不会解析html
v-html会覆盖原有的内容，可以解析html内容
<div id="app">
<p v-html="name">++++++++</p>
<p v-html="meg">++++++++</p>
</div>
<script>
let vue=new Vue({
el:"#app",
data:{
name:"王大胜",
meg:"<span>华南理工大学</span>"
}
})
</script>
v-if指令
该指令可以对元素实现条件管理。只要满足条件就可以实现元素的展现，如果内容为ture则显示元素，如果为false，就不加载元素，也不会被创建
<div id="app">
<p v-if="age >=20">成年人1</p>
<p v-else-if="age >=15">成年人2</p>
<p v-else="age">未成年人3</p>
</div>
<script>
let vue=new Vue({
el:"#app",
data:{
name:"王大胜",
age:15,
}
})
</script>
- 可以直接设定age取值为ture或者false
- 可以和v-else结合使用，不过中间不可以插入其他元素
- v-else不可以单独使用
- 可以结合v-if-else使用
