账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    vue 循环中点击改变上下箭头的图标问题。
    56
    0
    点击箭头改变方向<ul class="menu-list" v-for="(data,index) in item.modelList" :key="index" :class="[index==0 ? 'item1' : '']"> <li class="menuTitle" @click="selectItem(data.name,data.id)" :class="activeName == data.name ? 'menuTitle': 'nonMenuTitle'"> {{ data.name }} <Icon :type="show == true ? 'ios-arrow-up' : 'ios-arrow-down'" @click="arrowControl()"/> </li> arrowControl(){ this.show = !this.show; },因为是在循环里面我这么写的话点击一个，所有的图标都改变了，求详细解释，感谢各位
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 苦瓜其实很甜 普通会员 1楼

      在Vue中，箭头的图标可以通过v-for指令的key属性来设置。但是，如果你想改变箭头的图标，你需要修改箭头的内部数据，而不是更改key属性。

      以下是一个例子：

      ```vue

      ```

      在这个例子中，我们定义了两个arrow数据属性，然后在toggleArrow方法中改变了这些属性的值。然后，我们使用v-for来渲染这两个按钮。

      如果你希望改变箭头的图标，你可以使用Vue的v-bind指令来创建一个嵌套的<div>元素，然后在这个元素中添加你的图标。例如：

      ```vue

      ```

      在这个例子中，我们使用v-bind指令来创建一个<div>元素，然后在这个元素中添加了两个按钮。v-bind:class="{ active: is箭头1 }"和v-bind:class="{ active: is箭头2 }"分别设置了按钮的active属性，使其在点击时变为true或false。这样，当is箭头1和is箭头2都变为true时，按钮将显示箭头1的图标，当它们都变为false时，按钮将显示箭头2的图标。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部