分类：v-for

2023
03-16

v-for循环中使用require/import关键字引入本地图片的几种方式

目录问题描述方式一（后端返回图片URL）方式二（前端使用require）方式三（前端使用import）总结问题描述我们做项目中，常常需要把图片呈现到页面上，一般来说有以下几种方式方式一（后端返回图片URL）这种方式就是后端返回图片的url地址，我们直接img标签的src属性绑定imgUrl即可。如下代码：<divclass="item"v-for="(item,index)inapiArr":key="index"><!--apiArr是后端返回的数据，其中的每一项中都有一个imgUrl属性... 继续阅读 >

2020
10-10

vue2和vue3的v-if与v-for优先级对比学习

Vue.js中使用最多的两个指令就是v-if和v-for，因此我们可能会想要同时使用它们。虽然官方不建议这样做，但有时确实是必须的，我们来了解下他们的工作方式：在vue2.x中，在一个元素上同时使用v-if和v-for时，v-for会优先作用。在vue3.x中，v-if总是优先于v-for生效。对比学习接下来我们通过一个简单的示例来感知下，假设我们想要实现一个极简的todoList效果：我们有一个todoList：consttodoList=[{... 继续阅读 >

2020
10-10

vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作

前言在v-for循环语句上，定义一个点击事件传入两个参数（当行数据、当前事件对象），如下代码片段，当前事件对象必须加上‘$'符号<template><div><ul><liv-for="(item,index)inarrData":key="index"@click="operate(item,$event)">{{item.title}}</li></ul></div></template><script>exportdefault{data(){return{arrData:[{id:1,title:'第一条数据'},{id:2,... 继续阅读 >

2020
10-10

Vue v-for中的 input 或 select的值发生改变时触发事件操作

oninput用法<inputtype="text"id="myInput"oninput="myFunction()"><script>functionmyFunction(){}</script>oninput如果需要在Vue中使用则需要写成v-on:input还有绑定id的时候这样写:id="'m_num'+index"注意m_num必须用单引号引起来<inputtype="number":id="'m_num'+index"v-on:input="jsMoney(index)">jsMoney方法jsMoney:function(index){$("#m_num"+index).val()}onchange：input中的文本修改后在input... 继续阅读 >

2020
10-08

vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作

这里使用的是给被点击的li添加类名的方式<template><divclass="person1"><divv-for="(item,index)inlists"@click="clickAdd(index)":key="index":class="{red:i===index}"><div>{{item.name}}</div></div></div></template><script>exportdefault{data(){return{isShow:false,i:null,lists:[{id:1,name:'rose'},{id:2,name:'mike'},{id:3,name:'jerry'}]}},met... 继续阅读 >

2020
10-08

利用Vue的v-for和v-bind实现列表颜色切换

需求：在页面上显示四个列表，初始时字体为黑色。鼠标点击某一个列表时，该列表的颜色变为红色，其余列表仍为黑色。代码实现：<!--css--><style>.red{color:red;}</style><!--html--><divid="app"><ul><liv-for="item,indexinmovies":class="{red:changeRed==index}"v-on:click="change(index)">{{item}}</li></ul></div><!--JavaScript--><scriptsrc="../JS/vue.js"></script><script>constapp=newVu... 继续阅读 >

2020
09-27

详解在Vue.js编写更好的v-for循环的6种技巧

在VueJS中，v-for循环是每个项目都会使用的东西，它允许您在模板代码中编写for循环。在最基本的用法中，它们的用法如下。<ul><liv-for='productinproducts'>{{product.name}}</li></ul>但是，在本文中，我将介绍六种方法来使你的v-for代码更加精确，可预测和强大。让我们开始吧。1.始终在v-for循环中使用key首先，我们将讨论大多数Vue开发人员已经知道的常见最佳做法——在v-for循环中使用:key。通过设置一个惟一的... 继续阅读 >

2020
09-25

vue中使用v-for时为什么不能用index作为key

结论：更新DOM的时候会出现性能问题会发生一些状态bugReact中的key也是如此如果已经了解为什么要用key，可以通过目录直接跳到下一节。为什么要用key？Vue和React都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。Vue和React的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：两个相同的组件产生类似的DOM结构，不同的组件... 继续阅读 >