条件渲染
v-if 值为false,v-if在的标签直接在HTML文档中删除;
v-show值为false,v-show在的标签display的值为none。
v-if=“表达式” //
表达式就是会返回一个值,此处要能转换为Boolean值。
template标签
最大的好处是不影响文档的结构,渲染时会将template标签
去掉
template只能和v-if配合使用
<body>
<div id="root">
<div>欢迎来到{{name}}</div>
<div>
<h2>编号:{{num}}</h2>
<button @click="num++">点我加一</button>
</div>
<hr />
<div>
<h2>v-show</h2>
<h2 v-show="num === 1">html</h2>
<h2 v-show="num === 2">css</h2>
<h2 v-show="num === 3">js</h2>
<h2 v-show="num === 4">vue</h2>
<h2 v-show="num === 5">nodejs</h2>
</div>
<hr />
<div>
<h2>v-if</h2>
<h2 v-if="num === 1">html</h2>
<h2 v-else-if="num === 2">css</h2>
<h2 v-else-if="num === 3">js</h2>
<h2 v-else-if="num === 4">vue</h2>
<h2 v-else-if="num === 5">nodejs</h2>
<h2 v-else>暂时截止</h2>
</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data() {
return {
name: '尚硅谷',
num: 1,
}
},
</script>
</body>
列表渲染
v-for遍历数组
<!-- 容器 -->
<div id="root">
<h2>人员列表</h2>
<ul>
<li v-for="p in persons" :key="p.id">
{{p.name}}-{{p.age}}
</li>
</ul>
</div>
new Vue({
el: '#root',
data() {
return {
persons: [{
id: '001',
name: '张三',
age: 18
},
{
id: '002',
name: '李四',
age: 17
},
{
id: '003',
name: '钱五',
age: 16
},
{
id: '004',
name: '王六',
age: 19
},
]
}
}
})
上方v-for
一个参数,下方v-for
两个参数
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}}-{{p.age}}
</li>
</ul>
第一个参数用来遍历数组中的元素,
第二个参数是数组中对应的坐标。
key
给结点一个标识,可以相当于人的身份证,:key
可以动态绑定数组内容的id
不写key,key默认index
工作原理:
数据→VDOM(虚拟结点含有key)→DOM
数据更新时,新旧虚拟DOM进行对比(diff)。根据相同key对比,内容相同,复用;内容不同,生成新的结点。
key的选择
v-for遍历对象
<h2>汽车信息</h2>
<ul>
<li v-for="(value,index) in cars" :key="index">
{{index}}:{{value}}
</li>
</ul>
cars: {
name: '奥迪',
price: '70万',
color: '黑色'
}
index是指属性名,
value是对应的属性值。
若只用一个行参那么只遍历属性值。
遍历字符串
<h2>遍历字符串</h2>
<ul>
<li v-for="(value,index) in str" :key="index">
{{index}}:{{value}}
</li>
</ul>
data(){
str: 'abcdefg',
}
遍历指定次数
<h2>遍历指定次数</h2>
<ul>
<li v-for="(value,index) in 6" :key="index">
{{index}}:{{value}}
</li>
</ul>
列表过滤
模糊搜索 – computed /watch
但是能用computed实现的用computed
1.拿到用户输入:v-model,keyWord
2.在computed中, 以原数组为数据范围, 使用filter逐项筛选姓名中是否含有对应的字(indexOf)
<!-- 容器 -->
<div id="root">
<h2>人员列表</h2>
<input type="text" v-model="keyWord" placeholder="请输入名字">
<ul>
<li v-for="(p,index) in filterPersons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
new Vue({
el: '#root',
data() {
return {
keyWord: '',
persons: [{
id: '001',
name: '马冬梅',
age: 18,
sex: '女'
},
{
id: '002',
name: '周冬雨',
age: 17,
sex: '女'
},
{
id: '003',
name: '周杰伦',
age: 16,
sex: '男'
},
{
id: '004',
name: '温兆伦',
age: 19,
sex: '男'
},
]
}
},
computed: {
filterPersons() {
return this.persons.filter((p) => {
return p.name.indexOf(this.keyWord) !== -1;
})
}
}
})
列表排序
computed
1.在computed中使用filter过滤数据, 在存入一个数组中
2.得到数组数据后进行排序
3.返回数据
<!--
* @LastEditors: 一只爱吃萝卜的小兔子
* @Date: 2022-04-24 16:49:04
* @LastEditTime: 2022-04-24 17:05:52
* @FilePath: \vuejs-learn\vue-start\list-sort.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 页面标签图标 -->
<link rel="shortcut icon" href="../favicon.svg">
<title>列表排序</title>
<!-- 引入Vue -->
<script src="../vuejs/vue.js"></script>
</head>
<body>
<!-- 容器 -->
<div id="root">
<h2>人员列表</h2>
<input type="text" v-model="keyWord" placeholder="请输入名字">
<button @click="sortType = 1">降序</button>
<button @click="sortType = 2">升序</button>
<button @click="sortType = 0">原顺序</button>
<ul>
<li v-for="(p,index) in filterPersons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false; // 阻止 Vue 在启动时生成的生产提示
new Vue({
el: '#root',
data() {
return {
sortType: 0,
keyWord: '',
persons: [{
id: '001',
name: '马冬梅',
age: 18,
sex: '女'
},
{
id: '002',
name: '周冬雨',
age: 17,
sex: '女'
},
{
id: '003',
name: '周杰伦',
age: 16,
sex: '男'
},
{
id: '004',
name: '温兆伦',
age: 19,
sex: '男'
},
]
}
},
computed: {
filterPersons() {
const arr = this.persons.filter((p) => {
return p.name.indexOf(this.keyWord) !== -1;
})
if (this.sortType) {
arr.sort((p1, p2) => {
return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age;
})
}
return arr;
}
}
})
</script>
</body>
</html>
下一节:前端之vue监测数据改变的原理