Vue相关指令总结
一、v-text
- 如果不想使用mustache语法展示文本,可以使用v-text的方法展示文本,但v-text 指令不够灵活,会覆盖原有内容,即插值表达式可以把Vue传递过来的数据和前台用户自己定义的数据结合在一起,但是v-text只能显示Vue对象传递过来的数据,会替换掉节点里已有的内容。
- 用法:
<div id="app">
<h2>{{message}},顶顶顶顶</h2>
<h2 v-text="message">,顶顶顶顶</h2>
</div>
<script type='text/javascript' src='js/vue.js'></script>
<script type='text/javascript'>
const app =new Vue({
el : "#app",
data :{
message :"dddd"
}
})
</script>
二、v-html
- 解析html标签
- 用法
<div id="app">
<h2>{{message}}</h2>
<h2>{{url}}</h2>
<!-- v-html用于解析html标签 -->
<h2 v-html="url"></h2>
</div>
<script type='text/javascript' src='js/vue.js'></script>
<script type='text/javascript'>
const app = new Vue({
el : "#app",
data :{
message : "你好啊",
//若服务器返回一个类似html的内容,使用v-html
url : "<a href='http://www.baidu.com'>百度一下</a>"
}
})
三、v-if/v-else/v-else-if
- v-if: 根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 template ,将提出它的内容作为条件块。
- 当和 v-if 一起使用时,v-for 的优先级比 v-if 更高
- v-else : 前一兄弟元素必须有 v-if 或 v-else-if
- 用法
<div id="app">
<!-- v-if的使用:传入一个Boolean值 -->
<h2 v-if=isShow>{{message}}</h2>
<!-- v-else的使用 -->
<h2 v-if=isShow>
isShow为true时显示我
</h2>
<h1 v-else>
isShow为false时显示我
</h1>
<!-- v-else-if的使用,不常用 -->
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>
</div>
<script type='text/javascript' src='js/vue.js'></script>
<script type='text/javascript'>
const app = new Vue({
el : "#app",
data :{
message : "dddd",
isShow : true,
score : 99
}
})
</script>
四、v-show
- 根据条件展示元素
- 注意,v-show 不支持 template 元素,也不支持 v-else
- v-show值为true,则展示,为false,则不展示
v-show与v-if的区别
- v-if 当条件为false时,包含v-if指令的元素,根本就不会存在于DOM中
- v-show 当条件为false时,v-show只不过是增加了一个行内样式:display:none
- 如何选择应该使用v-if还是v-show:
当需要在显示和隐藏之间切片很频繁时,使用v-show
当只有一次切换时,建议使用v-if
- 用法
<div id="app">
<h2 v-if="isShow">{{message}}</h2>
<h2 v-show="isShow">{{message}}</h2>
</div>
<script type='text/javascript' src='js/vue.js'></script>
<script type='text/javascript'>
const app = new Vue({
el : "#app",
data : {
message : "ssss",
isShow : true,
}
})
</script>
五、v-for
- 用法
<div id="app">
<!-- 1.遍历数组(不需要下标值) -->
<h2 v-for="item in names">{{item}}</h2>
<!-- 2.获取索引值的数组遍历-->
<h2 v-for="(item , index) in names">{{index+1}}.{{item}}</h2>
<!-- 3.遍历对象 -->
<ul>
<!-- 在遍历对象的过程中,如果只获取一个值,那么获取到的是value -->
<li v-for="item in info">{{item}}</li>
<!-- 同时获取value和key的值 :(value , key) in info -->
<li v-for="(value , key) in info">{{key}}-->{{value}}</li>
<!-- 获取key,value和index -->
<li v-for="(value , key , index ) in info">{{key}}-->{{value}}-->{{index}}</li>
</ul>
<!-- 4.v-for使用过程添加key属性 -->
<!-- key属性值要与mustache语法中展示的一一对应 -->
<h3 v-for="item in letters" :key="item">{{item}}</h3>
</div>
<script type='text/javascript' src='js/vue.js'></script>
<script type='text/javascript'>
const app = new Vue({
el :"#app",
data : {
names : ['why' , 'ddd' , 'dfff' , 'lll'],
info : {
name : "ddd",
age : 18 ,
schools : "fff"
},
letters : ['A','B','C','D','E']
}
})
</script>
六、v-pre
- v-pre可以使之不按照mustache语法解析,标签里面内容是什么,那么就显示什么
- 用法
<div id="app">
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
</div>
<script type='text/javascript' src='js/vue.js'></script>
<script type='text/javascript'>
var app = new Vue({
el:"#app",
data : {
message : "sss"
}
})
</script>
七、v-once
- 只渲染元素和组件一次,随后的渲染,使用了此指令的元素/组件及其所有的子节点,都会当作静态内容并跳过,这可以用于优化更新性能。即加了v-once的在控制台改变message值时,其不会变
- 用法
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script type='text/javascript' src='js/vue.js'></script>
<script type='text/javascript'>
var app = new Vue({
el:"#app",
data : {
message : "sss",
}
})
</script>
八、v-cloak
- 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
- 用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-cloak指令的使用</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!-- v-cloak指令几乎不会用,了解即可 -->
<div id="app" v-cloak>
<h2>{{message}}</h2>
</div>
<script type='text/javascript' src='js/vue.js'></script>
<script type='text/javascript'>
//在Vue解析之前,div中有一个属性v-cloak
//在Vue解析之后,div中没有v-cloak属性
setTimeout(function(){
const app = new Vue({
el : "#app",
data : {
message : "ddd"
}
})
},1000)
</script>
</body>
</html>