vuejs根据数据条件绑定一个类 [英] vuejs conditional binding a class based on the data

查看：23 发布时间：2021/9/20 19:43:57 vue.js

本文介绍了vuejs根据数据条件绑定一个类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

谁能告诉我我做错了什么?我试图根据数据模型中是否显示是或否来绑定类.我尝试过条件绑定，但我猜可能是我遗漏了一个参数或以错误的方式处理这个问题.

我错过了什么?我希望css January 类绑定到表.如果 v-bind 已经存在，我如何触发 v-if?

谢谢

<头><风格>桌子，，TD{边框:1px纯黑色；}第 {宽度:100px；高度:100px；背景颜色:黄色；}TD{背景颜色:灰色；}.一月{背景颜色:粉红色；}</风格><身体><表格><div id="cal"><tr><th>月</th><th>节省</th><th>花费</th></tr><tr><td v-bind:class="{'January':yes}">January</td><td>$100</td><td>$10</td></tr><tr><td>二月</td><td>$80</td><td>$300</td></tr><tr><td>三月</td><td>$80</td><td>$0</td></tr><script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script><脚本>新的 Vue({el: '#cal',数据: {一月:'是'，二月:'是'，三月:'是'，四月:'是'，五月:'是'，六月:'是'，七月:'是'，八月:'是'，九月:'是'，十月:'是'，十一月:'是'，十二月:'是'}})

</html>

解决方案

所以对于 :class 绑定，你传入一个对象是 {css_class : someThingThatResolvesToTrueOrFalse}

所以你可以做类似的事情

<td v-bind:class="{'January': January == 'yes'}">January</td>

更好的方法是用 bool 替换 yes 并判断该值而不是比较.

您的代码已更新.

new Vue({el: '#cal',数据: {一月:'是'，二月:'是'，三月:'是'，四月:'是'，五月:'是'，六月:'是'，七月:'是'，八月:'是'，九月:'是'，十月:'是'，十一月:'是'，十二月:'是'}})

表格，，TD{边框:1px纯黑色；}第 {宽度:100px；高度:100px；背景颜色:黄色；}TD{背景颜色:灰色；}.一月 {背景颜色:粉红色；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script><div id="cal"><表格><tr><th>月</th><th>节省</th><th>花费</th></tr><tr><td v-bind:class="{'January':January == 'yes'}">January</td><td>$100</td><td>$10</td></tr><tr><td>二月</td><td>$80</td><td>$300</td></tr><tr><td>三月</td><td>$80</td><td>$0</td></tr>

</html>

Can someone tell me what am I doing wrong? I am trying to bind the class based on if in the data model is displays a yes or no. I have tried conditional binding, but guess maybe I am missing a parameter or going about this the wrong way.

What am I missing? I want the css January class to bind to the table. how do I trigger v-if if v-bind already there?

Thanks

<!DOCTYPE html>
<html>

<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }

        th {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

        td {
            background-color: grey;
        }
        .January{
            background-color: pink;
        }

    </style>
</head>

<body>

    <table>
        <div id="cal">

            <tr>
                <th>Month</th>
                <th>Savings</th>
                <th>Spent</th>
            </tr>
            <tr>
                <td v-bind:class="{'January':yes}">January</td>
                <td>$100</td>
                <td>$10</td>
            </tr>
            <tr>
                <td>February</td>
                <td>$80</td>
                <td>$300</td>
            </tr>

            <tr>
                <td>March</td>
                <td>$80</td>
                <td>$0</td>
            </tr>
            <script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>

            <script>
                new Vue({
                    el: '#cal',
                    data: {
                
                        January:'yes',
                        February:'yes',
                        March:'yes',
                        April:'yes',
                        May:'yes',
                        June:'yes',
                        July:'yes',
                        August:'yes',
                        September:'yes',
                        October:'yes',
                        November:'yes',
                        December:'yes'
                    }
                })

            </script>
        </div>
    </table>


</body>

</html>

解决方案

So for the :class binding you pass in an object that is {css_class : someThingThatResolvesToTrueOrFalse}

So you could do something like

<td v-bind:class="{'January': January == 'yes'}">January</td>

The better approach would be to replace yes with a bool and judge off that value instead of a comparison.

Here is your code updated.

new Vue({
  el: '#cal',
  data: {

    January: 'yes',
    February: 'yes',
    March: 'yes',
    April: 'yes',
    May: 'yes',
    June: 'yes',
    July: 'yes',
    August: 'yes',
    September: 'yes',
    October: 'yes',
    November: 'yes',
    December: 'yes'
  }
})

table,
th,
td {
  border: 1px solid black;
}

th {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

td {
  background-color: grey;
}

.January {
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="cal">

  <table>

    <tr>
      <th>Month</th>
      <th>Savings</th>
      <th>Spent</th>
    </tr>
    <tr>
      <td v-bind:class="{'January':January == 'yes'}">January</td>
      <td>$100</td>
      <td>$10</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
      <td>$300</td>
    </tr>

    <tr>
      <td>March</td>
      <td>$80</td>
      <td>$0</td>
    </tr>
  </table>
</div>


</body>

</html>

这篇关于vuejs根据数据条件绑定一个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

vuejs根据数据条件绑定一个类 [英] vuejs conditional binding a class based on the data

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

vuejs根据数据条件绑定一个类 [英] vuejs conditional binding a class based on the data

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭