投稿
  1. 展天联盟首页
  2. 投稿

vstart工具(vstart工具大全)

唐洛 • • 投稿

v-for遍历数组

当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。v-for的语法类似于JavaScript中的for循环。格式如下 : item in items的形式。我们来看一个简单的案例∶如果在遍历的过程中不需要使用索引值v-for=”movie in movies”依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢?语法格式: v-for=(item, index) in items其中的index就代表了取出的item在原数组的索引值。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</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+1}}-{{item}}</li>
</ul>
</div>

<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
names: ["why", "kobe", "james", "curry"]
}
})
</script>
</body>

</html>

vstart工具(vstart工具大全)

v-for遍历对象

v-for可以用于遍历对象：比如某个对象中存储着你的个人信息，我们希望以列表的形式展示出来

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div id="app">
<!-- 1、在遍历对象的过程中，如果只是获取一个值，那么获取到的是value -->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>

<!-- 2、获取key和value （value，key） -->
<ul>
<li v-for="(value,key) in info">{{value}} - {{key}}</li>
</ul>

<!-- 3、获取key和value和index （value,key,index） -->
<ul>
<li v-for="(value,key,index) in info">{{value}} - {{key}} - {{index}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
info: {
name: 'why',
age: 18,
height: 1.88
}
}
})
</script>
</body>

</html>

vstart工具(vstart工具大全)

组件的key属性

官方推荐我们在使用v-for时，给对应的元素或组件添加上一个：key属性。为什么需要这个key属性呢(了解）?这个其实和Vue的虚拟DOM的Diff算法有关系。这里我们借用React’ s diff algorithm中的一张图来简单说明一下：当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率?所以我们需要使用key来给每个节点做一个唯一标识Diff算法就可以正确的识别此节点找到正确的位置去插入新的节点。所以一句话，key的作用主要是为了高效的更新虚拟DOM。

检测数组更新

因为vue是响应式，所以当数据发生变化时，vue会自动检测数据变化，视图就会发生对应的更新vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发试图的更新push()

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['A', 'B', 'C', 'D', 'E']
},
methods: {
btnClick() {
// push 在数组后面添加 可以一次增加多个
this.letters.push("aaa");
}
}
})
</script>
</body>

</html>

vstart工具(vstart工具大全)

通过索引修改，分响应式

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['A', 'B', 'C', 'D', 'E']
},
methods: {
btnClick() {
// 通过索引值修改数组中的元素
this.letters[0] = 'bbb';
}
}
})
</script>
</body>

</html>

点击按钮后数组实际上已经改变了，但是页面没有渲染

vstart工具(vstart工具大全)

pop()

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['A', 'B', 'C', 'D', 'E']
},
methods: {
btnClick() {
// pop() 从最后删除
this.letters.pop();
}
}
})
</script>
</body>

</html>

vstart工具(vstart工具大全)

shift()

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['A', 'B', 'C', 'D', 'E']
},
methods: {
btnClick() {
// shift() 删除数组中的第一元素
this.letters.shift();
}
}
})
</script>
</body>

</html>

vstart工具(vstart工具大全)

unshift()

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['A', 'B', 'C', 'D', 'E']
},
methods: {
btnClick() {
// unshift() 在数组最前面添加元素 可以一次增加多个
this.letters.unshift('ccc');
}
}
})
</script>
</body>

</html>

vstart工具(vstart工具大全)

splice()

删除：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['A', 'B', 'C', 'D', 'E']
},
methods: {
btnClick() {
// splice() 可以删除元素，可以插入元素，可以替换元素
// 删除元素：第二个参数传入你要删除几个元素（如果没有传，就删除后湖面所有的元素）
this.letters.splice(1);

}
}
})
</script>
</body>

</html>

vstart工具(vstart工具大全)

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['A', 'B', 'C', 'D', 'E']
},
methods: {
btnClick() {
// splice() 可以删除元素，可以插入元素，可以替换元素
// 删除元素：第二个参数传入你要删除几个元素（如果没有传，就删除后湖面所有的元素）
// this.letters.splice(1);
this.letters.splice(1,1);
}
}
})
</script>
</body>

</html>

vstart工具(vstart工具大全)

替换：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['A', 'B', 'C', 'D', 'E']
},
methods: {
btnClick() {
// splice() 可以删除元素，可以插入元素，可以替换元素
// 删除元素：第二个参数传入你要删除几个元素（如果没有传，就删除后湖面所有的元素）
// this.letters.splice(1);
// this.letters.splice(1,1);
// 替换元素：第二个参数，表示要替换几个元素，后面的是用于替换前面的元素
this.letters.splice(1,3,'m','n','l');
}
}
})
</script>
</body>

</html>

vstart工具(vstart工具大全)

插入元素：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['A', 'B', 'C', 'D', 'E']
},
methods: {
btnClick() {
// splice() 可以删除元素，可以插入元素，可以替换元素
// 删除元素：第二个参数传入你要删除几个元素（如果没有传，就删除后湖面所有的元素）
// this.letters.splice(1);
// this.letters.splice(1,1);
// 替换元素：第二个参数，表示要替换几个元素，后面的是用于替换前面的元素
// splice(start)
// this.letters.splice(1,3,'m','n','l');

// 插入 第二个三处传入0，并且后面跟上要插入的元素
this.letters.splice(1,0,'x','y','z')
}
}
})
</script>
</body>

</html>

vstart工具(vstart工具大全)

sort()

排序

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['X', 'Y', 'Z', 'D', 'E']
},
methods: {
btnClick() {
// sort()
this.letters.sort();
}
}
})
</script>
</body>

</html>

vstart工具(vstart工具大全)

reverse()

反转

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['X', 'Y', 'Z', 'D', 'E']
},
methods: {
btnClick() {
// reverse()
this.letters.reverse();
}
}
})
</script>
</body>

</html>

vstart工具(vstart工具大全)

Vue.set()

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['X', 'Y', 'Z', 'D', 'E']
},
methods: {
btnClick() {
// set(要修改的对象，索引值，修改后的值)
Vue.set(this.letters,0,'bbbbbbb');
}
}
})
</script>
</body>

</html>

vstart工具(vstart工具大全)

本文链接：https://www.zhantian9.com/228372.html

赞 (0)
唐洛唐洛编辑
0 0
上一篇 2022-01-25 11:23:07
下一篇 2022-01-25 11:33:01

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2000000@qq.com 举报，一经查实，本站将立刻删除。

发表回复

您的电子邮箱地址不会被公开。

记住昵称、邮箱和网址，下次评论免输入