v-for给列表里的指定项单独绑定事件，使用v-if 和v-else配合即可

最新推荐文章于 2023-02-12 15:35:07 发布
最新推荐文章于 2023-02-12 15:35:07 发布
阅读量482 收藏
点赞数
分类专栏： vue 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hbvh1/article/details/121040604
版权 
      <div class="icon" v-for="(item,index) in List" :key="">
        <router-link  :to="item.to">
          <el-card style="border-radius: 10px; background: #10001528">
            <div class="houiconlist"  v-if="index == 7"  @click="getNewVersion()" >
              <div class="iconfont" v-html="item.icon" ></div>
              <span class="text"> {{ item.text }}</span>
            </div>
            <div class="houiconlist" v-else  >
              <div class="iconfont" v-html="item.icon" ></div>
              <span class="text"> {{ item.text }}</span>
            </div>
          </el-card>
        </router-link>
        </div>

杂货铺(城南渔人)
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的v-for循环中单独给元素设置点击事件的样式
weixin_68658847的博客
02-10 3057
vue的v-for循环中单独给元素设置点击事件的样式
uni-app实战之社区交友APP（17）账号模块和文章列表实现
CUFEECR的博客
03-20 688
我的页面通过Vuex修改登录状态和保存用户信息到缓存；实现手机号验证码和用户名密码登录两种方式；启动APP时初始化用户登录状态来保持登录状态；退出登录需要修改登录状态、清除登录信息，并调整显示内容；第三方登录包括微信、QQ和微博登录，使用uni.login接口实现。搭建修改账号与安全页面；新建页面实现绑定手机功能；实现修改密码交互；实现绑定邮箱功能；实现第三方账号的绑定与登录。修改头像需要上传图片；实现修改用户信息功能。在文章列表和详情页面实现关注；获取用户交互数据；在文章列表和详情页面实现顶踩功能。
vue v-for 和 v-if 、v-else一起使用造成的bug
weixin_30492601的博客
10-10 823
现象：导致v-else 执行v-for的length次数， 从现象看应该v-for先解析，然后将v-if和v-else包在其中 解决方案：很简单，tempalte 将v-if v-else 隔离到最外层 <template vi-if> < v-for> </template> <template v-else> </tem...
v-else中的代码未执行——v-if和v-for在同一结点使用
Annie的博客
06-05 1344
一、现象 v-if和v-else中为结构类似的代码，当判断条件为true时，v-if中的代码正常执行，而当判断条件为false时，v-else中的代码却没有执行。代码如下： 二、原因 我的v-if和v-else是和v-for一起使用的，此时，v-for的优先级是大于v-if和v-else的。相当于v-if重复运行于每个v-for循环中，v-else同理。所以节点未...
vue中v-for、v-if的渲染和数据绑定问题
qq_41097244的博客
10-19 1131
学习vue时，知道全局事件总线/自定义事件中需要进行数据的绑定，从而进行父子组件间的数据传输。 需要注意的是，父子组件中的数据何时进行绑定，是需要根据业务逻辑来的。寻常的数据绑定在挂载之后进行绑定即可，但是vue是挂载和数据渲染分开的，当使用到v-for、v-if等需要在渲染阶段重新加载数据的，mounted处进行绑定显然是不行的。 比如开发时遇到的问题：v-for渲染出的组件中，需要接受它的三个子组件的传递的数据，当用户在输入了子组件的内容，并点击确认时，才会完成子组件的数据绑定。那父组件应该何时完成它的
Vue 条件渲染&列表渲染&事件处理&表单绑定
qq_44718666的博客
07-22 507
Vue 条件渲染 v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 <h1 v-if="awesome">Vue is awesome!</h1> 也可以用 v-else 添加一个“else 块”： <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no ????</h1> 在 template 元素上使用 v-
v-if指令和v-else-if和v-else (分支结构)和v-for
清风的博客
11-09 1503
v-if指令 1.v-if指令和v-else-if和v-else (分支结构) <body> <div id="app"> <div v-if='score>=90'>优秀</div> <div v-else-if='score<90&&score>=80'>良好&...
vue iconfont通过循环渲染绑定
白大美的程序日志
12-01 982
对于日常开发的小伙伴而言，iconfont图标非常常见，当在侧边栏展示的时候，由于侧边栏要切换成动态接口获取，图标依然由前端提供渲染，这时候，该怎么写呐，话不多说，上代码 <li class="sub-menu" @click="changeSer(item.code)" :class="{ 'sub-active': subActive === item.code }" v-
vue v-for循环中如何给部分元素添加事件和样式
Zed_GM的博客
08-06 4297
统一添加样式很简单，下面看下给单独某个循环出来的元素添加事件和样式。 <template> <div id="bbottom" class=""> <div class="bottom"> <div class="title"> <el-breadcrumb separator-class="el-ico...
浅谈vue 锚点指令v-anchor的使用
12-13
在本文中，我们将深入探讨一个自定义指令`v-anchor`的实现和使用，该指令用于实现平滑滚动到页面中的指定锚点。 首先，我们看到`v-anchor`指令的实现代码，它是一个Vue directive的钩子函数`inserted`。这个钩子在...
VUE初学--表单输入与v-model
qq_42970981的博客
12-13 1099
1、基本用法 1、v-modle 在input的基本用法 表单控件在实际业务需求中运用是非常常见，比如，输入框、下拉框、多选、单选等，一般常见于，用户登录注册等，用他们完成数据录入，校验，提交等 Vue提供了 v-model 指令在表单元素上创建 双向数据绑定 他会根据控件类型自动选取正确的方法来更新元素 <div id="app"> <input type="text" ...
如何理解vue中的v-bind？
开源世界
09-16 2029
如果你写过vue，对v-bind这个指令一定不陌生。 下面我将从源码层面去带大家剖析一下v-bind背后的原理。 会从以下几个方面去探索： v-bind关键源码分析 v-bind化的属性统一存储在哪里：attrsMap与attrsList 绑定属性获取函数 getBindingAttr 和 属性操作函数 getAndRemoveAttr v-bind如何处理不同的绑定属性 v-bind:key源码分析 v-bind:title源码分析 v-bind:class源码分析 v-bind:style源码分析 v-
Vue中的指令及应用合集(v-指令)
angrynouse的博客
07-22 365
v-bind v-model v-on v-....
Vue2：v-if、v-for、v-else 的渲染问题
weixin_43932309的博客
10-02 1791
现象：当 v-if和v-for同时使用，且其后紧跟v-else时。v-if条件不满足，v-else循环展示多次（length次）。实际效果等同于：v-for嵌套v-if和v-else。建议：不推荐同时使用 v-if 和 v-for。
v-for和v-if一起使用的正确方法
weixin_35755434的博客
02-12 2087
v-for 和 v-if 一起使用的正确方法是，先使用 v-if 判断某个元素是否需要渲染，然后再使用 v-for 循环渲染这个元素。 举个例子： <template v-if="items.length > 0"> <ul> <li v-for="item in items" :key="item.id">{{ item.text }}&lt...
VUE基本语法,if,for,绑定事件和双向绑定
qq_39379958的博客
06-28 642
VUE基本语法 v-if <body> <div id="app"> <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> </div> <script> var mar=new Vue({ el:"#app", data:{ ok:true } }); </script&g
VUE的常用指令
m0_63165596的博客
12-27 274
v-once： 口该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。 v-show： 是通过标签的CSS样式display的值是不是none，控制显示隐藏，v-show通过css中的display属性来控制，v-show更适合元素的切换 v-if： 是动态的向DOM树中添加或者删除元素，v-if通过创建或删除DOM节点来实现元素的显示隐藏，v-if更适合数据的筛选和初始渲染 v-else、v-else-if： 是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则
asp.net前端页面上使用if
hua_ban_yu的博客
07-31 5073
在项目开发中有遇到过需要在前端页面上使用if和else判断显示的内容，只需要在if前面加上一个@即可。以下是在cshtml页面上使用if和else进判断                                       @if (ViewBag.User.Img != null)                                     {              ...
vue中使用v-for循环出来的数据,如何单独控制显示隐藏
weixin_45453560的博客
07-29 6995
vue中使用v-for循环出来的数据,如何单独控制显示隐藏
v-for循环出来的elmentui表单怎么绑定表单验证
最新发布
08-10
在Element UI中，你可以使用`v-model`指令来绑定表单元素，并结合其内置的`validate`方法来进行验证。当使用`v-for`循环生成多个表单项时，你需要为每个表单元素单独绑定`v-model`，同时给每个元素添加一个独立的验证规则。 例如，假设你有这样一个数组： ```html <template> <div> <el-form v-for="(item, index) in items" :key="index" :model="formItems[index]" ref="myForm"> <el-form-item label="字段名称">{{ item.label }}</el-form-item> <el-input v-model="formItems[index].value" placeholder="请输入"></el-input> <!-- 添加一个自定义的验证规则 --> <el-form-item prop="value" rules="required"> <span v-if="errors[index] && errors[index].message">必填</span> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { items: [ { label: '姓名', value: '' }, { label: '邮箱', value: '' } ], formItems: [], // 初始化对应长度的空数组存储验证状态 errors: [] }; }, watch: { formItems(newValues) { this.$refs.myForm.validate((valid) => { if (valid) { console.log('所有表单项验证通过'); } else { const fieldErrors = []; for (let i = 0; i < newValues.length; i++) { fieldErrors[i] = {}; if (!newValues[i].value) { fieldErrors[i].message = '此项不能为空'; } } this.errors = fieldErrors; } }); } } }; </script> ``` 在这个例子中，我们为每个表单项创建了一个`formItems`数组，然后在`watch`监听器中，每当`formItems`变化时，会触发表单验证。如果验证失败，会在`errors`数组中记录错误信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值