01-v-for遍历数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--1. 没有使用下标值-->
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
<!--2. 使用下标值遍历-->
<ul>
<li v-for="(item, index) in names">
{{index}}.{{item}}
</li>
</ul>
</div>
<script src="../../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
names: ['bingo', 'chengbin', 'dabin']
}
})
</script>
</body>
</html>
02-v-for遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--1. 如果只是一个值, 返回的是value-->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!--2. 获取value, key-->
<ul>
<li v-for="(value, key) in info">{{key}}:{{value}}</li>
</ul>
<!--3. 获取value, key, index-->
<ul>
<li v-for="(value, key, index) in info">{{key}}:{{value}}:{{index}}</li>
</ul>
</div>
<script src="../../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
info: {
name: 'bingo',
age: 27,
height: 1.75
}
}
})
</script>
</body>
</html>
03-v-for添加key
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--app.letters.splice(2,2), 从第二个下表开始删除两个元素 -->
<!--app.letters.splice(2, 0, 'bingo'), 从第二个位置开始, 添加一个元素-->
<!--不加key会进行效率低的位移操作, 加入key会先把已有进行一一对应, 新加入的最后新建一个, 不要用index(不能一一对应)-->
<div id="app">
<ul>
<li v-for="item in letters" :key="item">{{item}}</li>
</ul>
</div>
<script src="../../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
letters: ['a', 'b', 'c', 'e', 'f']
}
})
</script>
</body>
</html>
04-哪些数组的方法是响应式的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
<button @click="btnClick">添加一个元素</button>
</ul>
</div>
<script src="../../js/vue.js"></script>
<script>
//可变数组
/*function sum(...nums){
for (let i = 0; i < nums.length; i++) {
console.log(nums[i]);
}
}
sum(1,2,3,4,5,6)*/
let app = new Vue({
el: '#app',
data: {
letters: ['b', 'a', 'e', 'z', 'f']
},
methods: {
btnClick(){
//1. push是响应式: true
//this.letters.push('bingo')
//2. 下标不是响应式: false
//this.letters[2] = 'bingo'
//3.pop true, 删除最后一个元素
//this.letters.pop()
//4. shift true, 删除第一个元素
//this.letters.shift()
//5. unshift true, 在数组最前面添加元素
//this.letters.unshift('gege')
//6. splice(开始位置=下表+1, 删除元素个数, 元素内容) true, 添加或删除元素
//6.1 不传删除元素个数就删除后面所有元素
//this.letters.splice(1)
//6.2 替换元素: 将第二个后面的三个元素替换为zzz
//this.letters.splice(2, 3, 'z', 'z', 'z')
//this.letters.splice(0, 1)//shif效果
//this.letters.splice(this.letters.length-1, 1)//pop效果
//this.letters.splice(0, 0, 'zero')//unshift效果
//this.letters.splice(this.letters.length, 0, 'zero')//push效果
//7. sort排序 true
//this.letters.sort()
//8. reverse反转, 换方向并不排序 true
//this.letters.reverse()
//Vue内部实现的set函数可以实现通过下标响应式改变值
//Vue.set(要修改的对象, 要修改的元素下表, 替换后的值)
//Vue.set(this.letters, 0, 'bingohasa')
}
}
})
</script>
</body>
</html>
05-作业的回顾和完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in movies" @click="selectLi(index)"
:class="{active: currentIndex === index}">
{{item}}</li>
</ul>
</div>
<script src="../../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
movies: ['海王', '海贼王', '加勒比海盗', '海尔兄弟'],
currentIndex: 0,
isActive: false
},
methods: {
selectLi(index){
this.currentIndex = index
}
}
})
</script>
</body>
</html>
518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
