文章目录
1.条件渲染、
1.1 v-if
利用v-if隐藏元素，是直接被移除,完全没有了，所以设用于切换频率较低的场景，而v-show只是将元素加了display: none;所以设用于切换频率较高的场景。
<h2 v-if="true">欢迎来到{{name}}</h2>
<h2 v-if="false">欢迎来到{{name}}</h2>
<h2 v-if="1 === 1">欢迎来到{{name}}</h2>
v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”,打断的意思是中间有其他内容
<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div>你好</div>//打断了
<div v-else>哈哈</div>
v-if与template可以配合使用，而不可以与v-show,这样v-show就不会起作用
<template v-if="n === 1">
<h2>你好</h2>
<h2>尚硅谷</h2>
<h2>北京</h2>
</template>
1.2 v-show
<h2 v-show="false">欢迎来到{{name}}</h2> -->
<h2 v-show="1 === 1">欢迎来到{{name}}</h2>
2.列表渲染
2.1 遍历数组
<ul>
<li v-for="(p,index) of persons" :key="index">
{{p.name}}-{{p.age}}
</li>
</ul>
注意：p是值，也就是value,然后index是索引，默认从0开始
注意：:key="index"一定要带（也可以不带），带了是好习惯，不带的话，它默认key的值是index
persons:[
{id:'001',name:'秦燕燕',age:18},
{id:'002',name:'秦小燕',age:19},
{id:'003',name:'秦燕妮',age:20}
]
2.2 遍历对象
<ul>
<li v-for="(k,value) of car" :key="k">
{{k}}-{{value}}
</li>
</ul>
注意：k为属性，value为属性值
car: {
name: '奥迪A8',
price: '70万',
color: '黑色'
}
2.3 key的原理
补充一下：
2.3.1 向列表添加内容(push(),unshift())
1.push()方法（在数组结尾处）向数组添加一个新的元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
2.unshift() 方法（在开头）向数组添加新元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
2.3.2 从列表删除内容(pop(),shift())
pop() 方法从数组中删除最后一个元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
shift() 方法会删除首个数组元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
2.3.3 添加对象案例
这样的话，存在一个问题，值与输入框不对应了，出现这个问题的原因就是:key=“index”，将其改成:key="p.id"即可,原因是，请看原理图
<button @click.once="add">添加一个老刘</button>
<ul>
<li v-for="(p,index) of persons" :key="p.id">
{{p.name}}-{{p.age}}
<input type="text">
</li>
</ul>
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
]
},
methods: {
add(){
const p = {id:'004',name:'老刘',age:40}
this.persons.unshift(p)
}
},
})
2.4 列表过滤
补充一下：
2.4.1 筛选数组元素(filter().indexOf())
（查看列表有没有符合条件的元素）
filter() 方法创建一个包含通过测试的数组元素的新数组
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
return value > 18;//返回的是符合条件的值
}
或者
var over18 = numbers.filter(
function(value) {
return value > 18;
})
或者
var over18 = numbers.filter(
(value) =>{
return value > 18;
})
输出：45，25
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置，如果要检索的字符串值没有出现，则该方法返回 -1。
var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")//输出0
document.write(str.indexOf("World") + "<br />")//输出-1
document.write(str.indexOf("world"))//输出6
document.write(str.indexOf(""))//输出0
注意：任何字符串中都含空字符串
2.4.2 姓名筛选案例
<h2>人员列表</h2>
//v-model数据双向绑定，用于获取输入的名字
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="(p,index) of filPerons" :key="index">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
new Vue({
el:'#root',
data:{
keyWord:'',
persons: [
{ id: '001', name: '秦燕燕', age: 19, sex: '女' },
{ id: '002', name: '秦小燕', age: 20, sex: '女' },
{ id: '003', name: '睡不醒的小小秦', age: 21, sex: '男' },
{ id: '004', name: '必须午睡的学薇', age: 22, sex: '男' }
],
filPerons:[]
},
//用watch属性实现
watch:{
keyWord:{
//必须需要这个，如果没有这个的话，一开始页面没有任何数据
//这样的话，页面刚开始的时候，handler()就会执行一次，只不过newvalue是一个空字符串，indexOf()会认为任何字符串中都含空字符串，所以都符合条件，就都会显示出来
immediate:true,
handler(val){
this.filPerons = this.persons.filter((p)=>{
return p.name.indexOf(val) !== -1
})
}
}
}
//用计算属性实现
//filPersons()什么时候被调用，当有人读取filPersons时，filPersons就会被调用，且返回值就作为filPersons的值
computed: {
filPerons() {
return this.persons.filter((p) => {//返回符合条件的列表
return p.name.indexOf(this.keyWord) !== -1//返回符合条件的对象
})
}
}
})
2.5 列表排序
补充一下：
2.5.1 列表排序的函数(sort())
默认地，sort() 函数按照字符串顺序对值进行排序。
该函数很适合字符串（“Apple” 会排在 “Banana” 之前）。
不过，如果数字按照字符串来排序，则 “25” 大于 “100”，因为 “2” 大于 “1”。
正因如此，sort() 方法在对数值排序时会产生不正确的结果。
我们通过一个比值函数来修正此问题：
//升序
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
//降序
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
2.5.2 根据年龄排序
<button @click="sortType = 2">年龄升序</button>
<button @click="sortType = 1">年龄降序</button>
<button @click="sortType = 0">原顺序</button>
data: {
keyWord: '',
sortType: 0, //0原顺序 1降序 2升序
persons: [
{ id: '001', name: '马冬梅', age: 30, sex: '女' },
{ id: '002', name: '周冬雨', age: 31, sex: '女' },
{ id: '003', name: '周杰伦', age: 18, sex: '男' },
{ id: '004', name: '温兆伦', age: 19, sex: '男' }
]
},
computed: {
//当filPersons()里面的属性(sortType)发生变化s
filPerons() {
const arr = this.persons.filter((p) => {
return p.name.indexOf(this.keyWord) !== -1
})
//判断一下是否需要排序
if (this.sortType) {//如果是true,也就是1或2
arr.sort((p1, p2) => {
return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
})
}
return arr
}
}
2.6 vue数据监测
2.6.1 添加属性
<button @click="addSex">添加一个性别属性，默认值是男</button>
student:{
name:'tom',
age:{
rAge:40,
sAge:29,
},
methods: {
addSex(){
// Vue.set(this.student,'sex','男')
this.$set(this.student,'sex','男')
}
}
对象添加(修改)属性
friends:[
{name:'jerry',age:35},
{name:'tony',age:36}
]
addFriend(){
this.student.friends.unshift({name:'jack',age:70})
},
updateFirstFriendName(){
this.student.friends[0].name = '张三'
//this.student.friends.splice(0,1,{name:'张三',age:35})
},
列表添加（修改）属性
hobby:['抽烟','喝酒','烫头']
addHobby(){
this.student.hobby.push('学习')
},
updateHobby(){
// this.student.hobby.splice(0,1,'开车')
// Vue.set(this.student.hobby,0,'开车')
this.$set(this.student.hobby,0,'开车')
},
removeSmoke(){
this.student.hobby = this.student.hobby.filter((h)=>{
return h !== '抽烟'
})
}
2.6.2 总结一下vue数据监测
在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
