美文网首页
vue v-bind绑定class时注意事项

vue v-bind绑定class时注意事项

作者: newway_001 | 来源:发表于2018-11-16 11:20 被阅读0次
    <style>
    .active {
        width: 100px;
        height: 100px;
        background: green;
    }
    .text-danger {
        background: red;
    }
    </style>
    
    <body>
    <div id="app">
      <div v-bind:class="classObject"></div>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        classObject: {
          active: true,
          'text-danger': true
        }
      }
    })
    </script>
    </body>
    

    其中text-danger为什么要加'',不加引号class显示不了?
    因为 {}内的代码是要拿去当js解析的,js中变量是没有用 ' - '号连接
    就像 css中 font-size 是用 - 号连接
    到了js中 就必须用驼峰的写法

    相关文章

      网友评论

          本文标题:vue v-bind绑定class时注意事项

          本文链接:https://www.haomeiwen.com/subject/igwpfqtx.html