1.条件渲染
- v-if 根据此指令可决定是否会在页面展示当前标签
<div id="app">
<div v-if="show">{{message}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show:false,
message: 'Hello Word'
}
})
</script>
上述代码不展示 div标签内容，我们在控制台查看，是没有渲染带有v-if指令的div标签
show=false
若我们将show的值变更为true,则div标签中的内容即可展示在页面上
show=true
此时我们查看控制台，页面渲染了带有v-if指令的div标签
image.png
-
v-show
使用v-show实现，在页面展示上并没有什么不同,但是我们查看控制台会发现无论show的值为true或者false，页面都会渲染v-show的标签
v-show
v-if和v-show都能够控制一个模板标签是否展示，但是v-if标签对应表达式一旦为false，其对应的标签就不会在dom上了；但是v-show对应的表达式为false，其对应的标签仍会显示在dom上；所以v-show的性能会高一些，它不会频繁的把一个标签在dom上删除再添加
- 对于v-if更复杂的使用（else&else if）
就如同我们在其他代码中的用的那样，if和else还有else if在vue中同样适用
<div id="app">
<div v-if="show" >{{message}}</div>
<div v-else>Bye Word!</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show:false,
message: 'Hello Word'
}
})
</script>
这时候我们查看控制台和页面展示，显示的是else标签的数据
v-else
注意：v-if和v-else必须紧贴在一起使用,v-else-if也同样适用。
<div id="app">
<div v-if="show ==='a'" >This is A </div>
<div v-else-if="show ==='b'">This is B</div>
<div v-else>Bye Word!</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show:'a'
}
})
</script>
v-else-if
- 关于input标签的key值
我们给v-if 标签和v-else标签中添加input标签
<div id="app">
<div v-if="show" >
用户名：<input />
</div>
<div v-else>
邮箱账户：<input />
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show:false
}
})
</script>
input
这时候我们在input框中输入内容后操作控制台，将show的值变为true,这时候我们发现input框中的数据没有更新，原因是vue在重新渲染页面时会尽量尝试复用已有的dom
input
解决办法是给input标签添加key值
<div id="app">
<div v-if="show" >
用户名：<input key="username"/>
</div>
<div v-else>
邮箱账户：<input key="mail"/>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show:false
}
})
</script>
这时我们可以看到当show=true时页面重新渲染，此时input中的数据更新
inputkey
2.列表渲染
首先我们看一个最基础的列表渲染，使用v-for循环列表中的每个元素内容item，每个元素的索引index
<div id="app">
<div v-for="(item,index) of list">
{{item}}--{{index}}
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
list:[
"Hello",
"vue",
"Nice",
"to",
"meet",
"you"
]
}
})
</script>
页面展示如下：
列表内容和索引展示
- 给v-for所在标签增加唯一的key值会提高性能，key值要求唯一，但是不建议使用元素的索引index，会导致dom没有办法重复的复用dom节点，建议使用数据的唯一标识作为key值，也是提高性能的最优写法，改写如下，页面展示不变：
<div id="app">
<div v-for="(item,index) of list" :key="item.id">
{{item.text}}--{{index}}
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
list:[{
id:"01012001",
text:"Hello"
},{
id:"01012002",
text:"Vue"
},{
id:"01012003",
text:"Nice"
},{
id:"01012004",
text:"to"
},{
id:"01012005",
text:"meet"
},{
id:"01012006",
text:"you"
}
]
}
})
</script>
- 修改list中的数据不能直接使用下标，可以使用vue提供的方法，可以通过改变引用来改变list中的数据
vue提供的方法：
1.pop 把数组中最后一项删除
2.push 向数组中增加一条数据
3.shift 删除数组的第一项
4.unshift 向数组的第一项中加内容
5.spilce 可以截取数组
6.sort 对数组进行排序
7.reverse 对数组进行取反
splice方法改变list中的数据
改变引用，即将list对象指向其他地址
通过改变引用改变list中的数据
- template 模板占位符
用于包裹一些标签，使得这些标签中的内容进行循环展示而不需要编写多余的循环代码，并且template在页面加载时不会渲染到页面上。
<div id="app">
<template v-for="(item,index) of list" :key="item.id">
<div >
{{item.text}}--{{index}}
</div>
<span>
{{item.text}}--{{index}}
</span>
</template>
</div>
- 对象的循环渲染以及修改
首先遍历对象的数据
<div id="app">
<div v-for="(item,key,index) of userInfo">
{{item}} -- {{key}} -- {{index}}
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
userInfo:{
name:"test1",
age:28,
gender:"male",
salary:"secret"
}
}
})
</script>
页面展示如下：
对象信息展示
修改对象的数据，改变对应的引用对象即可
修改对象数据内容
向对象中添加新的数据，可以通过改变对象的引用来实现
向对象中添加数据
网友评论