V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
firhome
V2EX  ›  Vue.js

深夜请教 vuejs 的一个问题。

  •  
  •   firhome · 2016-03-15 22:52:07 +08:00 · 2530 次点击
    这是一个创建于 3202 天前的主题,其中的信息可能已经有所发展或是发生改变。
    同步: https://segmentfault.com/q/1010000004613246

    数据
    [{

    name:'aaa',
    id:'0',
    iscur:false
    },{

    name:'bbb',
    id:'1',
    iscur:false
    },{

    name:'ccc',
    id:'2',
    iscur:true
    }
    ]

    html:

    <li v-for='item in data'>{{ item.name }}</li>

    我需要分别点击 li 添加一个 class cur ,同时更新状态到 data 里的 iscur
    操作数据的 iscur:true 时 当前 li 也自动添加 /删除 cur ,

    请问这个操作 用 vuejs 怎么实现呢?
    6 条回复    2016-06-23 00:26:36 +08:00
    sox
        1
    sox  
       2016-03-15 23:32:51 +08:00
    擦,看文档,而且这个代码是给人看的吗
    eric6356
        2
    eric6356  
       2016-03-15 23:47:56 +08:00
    可以看一下 class 与 style 的绑定那一节,另外操作数据的时候可能需要用 Vue.set 来确保 Vue 能追踪到,这里挺复杂的。同学习中!
    emric
        3
    emric  
       2016-03-15 23:51:43 +08:00
    文档是用来看的。
    coolzjy
        4
    coolzjy  
       2016-03-15 23:54:58 +08:00
    ```html
    <li v-for='item in data' @click="item.iscur = !item.iscur" :class="{ cur: item.iscur }">{{ item.name }}</li>
    ```
    coolzjy
        5
    coolzjy  
       2016-03-15 23:55:51 +08:00
    @coolzjy 我是不是助长了张口就问的不良风气
    EnginDee
        6
    EnginDee  
       2016-06-23 00:26:36 +08:00
    似乎是 jquery 年代,思维还没转过来。 我也是 low 逼, jq 年代的老人了……
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2347 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 15:51 · PVG 23:51 · LAX 07:51 · JFK 10:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.