• 外联样式先写好选择器,然后通过:stylev-bind:style绑定。
  • 绑定样式可以通过数组,也可以通过数组嵌套对象或者三元表达式,也可以使用json来进行绑定。
  • 也有以下用法,其中data绑定的值作用其实是作为boolean值,所以如果要使用只要赋予非0或者非false(没有引号)就行,也可以在绑定样式中直接以{inner:false}写出。

    <style>
    .box{
      background-color: pink;
      width: 100%;
      height: 200px;
    }
    .inner{
      background-color: blue;
      width: 100px;
      height: 100px;
    }
    </style>
    
    <div id="app">
    <div v-bind:class="{box}">我是box
      <div v-bind:class="{inner}">我是inner1</div>
      <div v-bind:class="{inner:false}">我是inner1</div>
      <div v-bind:class="{inner:inner}">我是inner2</div>
    </div>
    </div>
    
    <script>
    var vm = new Vue({
      el:'#app',
      data:{
          box:true,
          inner:"inner"
      },
      methods:{}
    })
    </script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/vue.js"></script>
    <style>
        .red{
            color:red;
        }
        .thin{
            font-weight: 200;
        }
        .italic{
            font-style: italic;
        }
        .active{
            letter-spacing: 0.5em;/*对中文有用*/
            word-spacing: 0.5em;/*对英文文有用*/
        }
    </style>
</head>
<body>
<div id="app">
    <h1>这是一个h1原来的样子!!!</h1>
    <h1 class="red thin">这是一个h1!!! 一般用法</h1>
    <h1 :class="['red','thin','italic']">这是一个h1!!! vue用法</h1>
    <h1 :class="['red','thin','italic',flag?'active':'']">这是一个h1!!! vue三元表达式用法</h1>
    <h1 :class="['red','thin','italic',{'active':flag}]">这是一个h1!!! vue数组嵌套对象用法</h1>
    <h1 :class="{red:true,thin:true,italic:false,active:false}">这是一个h1!!! vue直接使用对象用法</h1>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            flag:true,
        },
        methods:{}
    })
</script>
</body>
</html>
最后修改:2020 年 10 月 21 日 12 : 10 AM
如果觉得我的文章对你有用,请随意赞赏