zoukankan      html  css  js  c++  java
  • VUE学习日记(七) ---- class样式属性绑定 v-bind:class

    v-bind:  简写可省略不写

    如 v-bind:class="" 简写 :class=""

    首先创建一个样式文件style.css

    body{
        font-size:24px;
    }
    .active{
        color:red;
    }
     
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>class绑定</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <link href="../vue_cli/css/style.css" rel="stylesheet">
      </head>
      <body>
        
        <div id="myPage">
          <div v-bind:class="{active:isActive}">测试文本内容</div>
          <div :class="{active:isActive}">测试文本内容</div>
          <button @click="btnclick">class绑定</button>
        </div>    
    
        <script>
          var myPage = new Vue({
            el:'#myPage',
            data:{
              isActive:false
            },
            methods:{
              btnclick:function()
              {
             //对当前值取反
                  this.isActive=!this.isActive;
              }
            }
          })
        </script>
    
      </body>
    </html>

    效果图:

     点击按钮后,效果展示:

     
  • 相关阅读:
    Codeforces 231E
    Practice 15.07.07 计算几何
    Codeforces 552E
    Topcoder SRM 661 (Div.1) 250 MissingLCM
    HDU 4971
    Codeforces Round #306 (Div. 2)
    URAL 1988
    URAL 2032
    ServiceStack.Ormlit 事务
    ServiceStack.Ormlit 使用Insert的时候自增列不会被赋值
  • 原文地址:https://www.cnblogs.com/JoeYD/p/13552391.html
Copyright © 2011-2022 走看看