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

请教一个关于 Vue.js 条件渲染与属性的问题

  •  
  •   ss098 ·
    ss098 · 2016-10-10 13:31:32 +08:00 · 4105 次点击
    这是一个创建于 2972 天前的主题,其中的信息可能已经有所发展或是发生改变。

    现在有如下数据:

    items: [
        {is_view: true}
        {is_view: false}
    ]
    

    以及如下代码:

    <div class="list">
        <div v-for="item in items">
            <div v-if="item['is_view']" class="list-item">
                <!--其他复杂的逻辑判断-->
            </div>
        </div>
    </div>
    

    我需要在 is_view 为 true 的情况下让 class 变为 .list-item .read ,所以用 v-else 。

    <div class="list">
        <div v-for="item in items">
            <div v-if="item['is_view']" class="list-item read">
                <!--其他复杂的逻辑判断-->
            </div>
            <div v-else class="list-item">
                <!--其他复杂的逻辑判断-->
            </div>
        </div>
    </div>
    

    这会导致里面的逻辑重复出现两次, Vue.js 文档里提到的《 Class 与 Style 绑定》似乎需要在 data 中创建一个数据对象,但是我这里有一个列表,这可能就不太适用了。

    请问大家,这个情况正确的解决方案是?

    谢谢。

    8 条回复    2016-10-10 20:51:33 +08:00
    yangxiongguo
        1
    yangxiongguo  
       2016-10-10 14:08:43 +08:00   ❤️ 1
    class={{item['is_view']?'classA':'classB'}}

    大概这样可以吗?没实际跑过,就一个思路
    mufeng
        2
    mufeng  
       2016-10-10 14:11:42 +08:00   ❤️ 1
    这样就好 :class="{'red': item.is_view}"
    mufeng
        3
    mufeng  
       2016-10-10 14:12:18 +08:00   ❤️ 1
    @yangxiongguo 官方推荐 bind-class
    MaiCong
        4
    MaiCong  
       2016-10-10 14:15:32 +08:00 via iPhone   ❤️ 1
    :class="{'read': item.is_view === true}"
    ss098
        5
    ss098  
    OP
       2016-10-10 14:19:36 +08:00
    非常感谢各位菊苣,问题已经解决,代码如下:

    <div v-bind:class="{'list-item read': item.is_view, 'list-item': !item.is_view">
    ----<!--其他复杂的逻辑判断-->
    </div>

    @yangxiongguo
    @mufeng
    @MaiCong
    MaiCong
        6
    MaiCong  
       2016-10-10 20:49:35 +08:00 via iPhone
    @ss098 去掉不必要的代码:

    <div :class="{'list-item read': item.is_view>
    ----<!--其他复杂的逻辑判断-->
    </div>
    MaiCong
        7
    MaiCong  
       2016-10-10 20:50:34 +08:00 via iPhone
    @ss098 手机打字,有点手抖
    <div :class="{'read': item.is_view>
    ----<!--其他复杂的逻辑判断-->
    </div>
    MaiCong
        8
    MaiCong  
       2016-10-10 20:51:33 +08:00 via iPhone   ❤️ 1
    =_=

    <div :class="{'read': item.is_view}">
    ----<!--其他复杂的逻辑判断-->
    </div>
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2652 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 01:46 · PVG 09:46 · LAX 17:46 · JFK 20:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.