zoukankan html css js c++ java

样式绑定的两种方法

通过class绑定

:class="{ activated:isActivated}",根据isActivated的true或false决定dom是否有class="activated"属性

<head>
  <script src="../vue.js"></script>
  <style>
    .activated{
      color: white;
      background-color: tan;
    }
  </style>
</head>
<body>
  <div id="app">
    <div @click="handleDivClick" :class="{activated: isActivated}">
      样式绑定
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        isActivated: false
      },
      methods: {
        handleDivClick(){
          this.isActivated = !this.isActivated
        }
      }
    })
  </script>
</body>

class="[activated]",vue实例的data中activated的值即为class的值，数组内表示变量，数组内可填写多个变量

<head>
  <script src="../vue.js"></script>
  <style>
    .activated{
      color: white;
      background-color: tan;
    }
  </style>
</head>

<body>
  <div id="app">
    <div @click="handleDivClick" :class="[activated]">
      样式绑定
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        activated: ''
      },
      methods: {
        handleDivClick(){
          this.activated = this.activated === "activated" ? "" : "activated"
        }
      }
    })
  </script>
</body>

通过style进行动态绑定

style的对象绑定：:style='styleObj' 实例data中定义styleObj:{color:'red'}

<body>
  <div id="app">
    <div @click="handleDivClick" :style="styleObj">
      样式绑定
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        styleObj: {
          color:"black"
        }
      },
      methods: {
        handleDivClick(){
          this.styleObj.color = this.styleObj.color === "black" ? "red" : "black"
        }
      }
    })
  </script>
</body>

查看全文

相关阅读:
C#中将全部代码一次性折叠
 C#中图片单击旋转事件
 块参照重命名
 补强圈设计
 c# winform 按名称取得控件
 获得某控件的父控件（容器）中的所有控件
 回车键当Tab键使用
 替换CAD中原有命令为开发人员自己开发的命令的方法
 窗体设置
 判断控件的tag是否为空的方法

原文地址：https://www.cnblogs.com/manhuai/p/14616764.html