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>
  • 相关阅读:
    学生管理系统初步总结
    ListView控件详解
    Windows窗体应用布局详解
    winforms控件
    指尖上的数据库之探囊取物
    指尖上的数据库之无中生有
    银行bank系统项目实践
    QT Creator 快速入门教程 读书笔记(一)
    我的程序员之路(英语的学习)
    游戏开发完整学习路线(各个版本都有)
  • 原文地址:https://www.cnblogs.com/manhuai/p/14616764.html
Copyright © 2011-2022 走看看