Vue的列表渲染怎样实现，方法是什么
导读：这篇文章主要给大家介绍“Vue的列表渲染怎样实现，方法是什么”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“Vue的列表渲染怎样实现，方法是什么”文章能对大家有所帮助。...
这篇文章主要给大家介绍“Vue的列表渲染怎样实现，方法是什么”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“Vue的列表渲染怎样实现，方法是什么”文章能对大家有所帮助。Vue的列表渲染
1.1.v-for
个人感觉其实就是基础语法的for循环，使用上也差不多，只是形式不同罢了,理解会使用。
使用方法;
1、遍历数组
v-for="item in 数组"
登录后复制 v-for="(item, index) in 数组"
登录后复制 对一个数组进行遍历实例：
div class="item" v-for="item in products">
h3 class="title">
商品:{
{
item.name}
}
/h3>
span>
价格:{
{
item.price}
}
/span>
p>
秒杀：{
{
item.desc}
}
/p>
/div>
const app = Vue.createApp({
data() {
return {
//2.数组 存放的是对象
products: [
{
id: 11, name: "mac", price: 1000, desc: "99" }
,
],
}
;
}
,
}
);
app.mount("#app");
登录后复制 2、遍历对象
⭐⭐
v-for也支持遍历对象，并且支持有一二三个参数：
- 一个参数： “value in object”;
- 二个参数： “(value, key) in object”;
- 三个参数： “(value, key, index) in object”;
v-for同时也支持数字的遍历：
每一个item都是一个数字；
!-- 2.遍历对象 -->
ul>
li v-for="(value,key,index) in info">
{
{
value}
}
- {
{
key}
}
- {
{
index}
}
/li>
/ul>
const app = Vue.createApp({
data() {
return {
info: {
bame: "why", age: 18, height: 1.88 }
,
}
;
}
,
}
);
app.mount("#app");
登录后复制 3、遍历字符串
li v-for="item in 100">
{
{
item}
}
/li>
登录后复制 1.2.v-for和template
⭐⭐
我们可以使用templ元素来循环渲染一段包含多个元素的内容
为什么这里不使用div呢？
我之前学的时候也没有怎么考虑这个，整理笔记的时候发现了这个问题
原因：
- 如果是div包裹的话，div也会被渲染出来
- 而使用template包裹的话，template并没有被渲染，相较于使用div会节省一个没有必要的div标签的使用。
其实，template的作用就是模板占位符，可以帮助我们包裹元素，在循环的过程总，template不会被渲染到页面上。
div(如果div没有实际的意义，那么可以使用template替换)
div v-for="(value,key,index) in infos">
span>
{
{
value}
}
/span>
strong>
{
{
key}
}
/strong>
i>
{
{
index}
}
/i>
/div>
登录后复制 template
template v-for="(value,key,index) in infos">
span>
{
{
value}
}
/span>
strong>
{
{
key}
}
/strong>
i>
{
{
index}
}
/i>
/template>
登录后复制 1.3.v-for 数组更新检测
⭐⭐
Vue将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新
被包裹过的方法包括：
- push() 数组的后面插入元素
- pop() 从数组后面删除一个元素
- shift() 从数组前面删除一个元素
- unshift() 从数组前面插入一个元素
- splice() 数组的剪贴、插入、删除
- sort() 排序
- reverse() 反转
这些方法的用法其实在js中都是差不多的，用到的时候想起来再查查
替换数组的方法
- 上面的方法会直接修改原来的数组；
- 但是某些方法不会替换原来的数组，而是会生成新的数组，比如 filter()、concat() 和 slice()；
//并不是完整写法！！！
li v-for="item in names">
{
{
item}
}
/li>
names: ["abc", "bac", "aaa", "cbb"],
// 1.直接将数组修改为一个新的数组
this.names = ["cc", "kk"];
// 2.通过一些数组的方法，修改数组中的元素
this.names.push("cc");
this.names.pop();
this.names.splice(2, 1, "cc");
this.names.sort();
this.names.reverse();
以上就是关于Vue的列表渲染怎样实现，方法是什么的介绍啦，需要的朋友可以参考上述内容，希望对大家有帮助，想要了解更多，欢迎关注网络，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Vue的列表渲染怎样实现，方法是什么
本文地址： https://pptw.com/jishu/652568.html