• vue四:vue基础之Class和style绑定


    一:class绑定

    准备好class

    一:三目运算的方式

    把class动态绑定,定义一个变量isActive为true,为true时绑定class=red,定义点击事件handlClick,当点击时,isActive取反,即为false,绑定class=yellow

    二:对象的形式

    上面是对只有两个class选项切换的情况,当有多个class切换的时候,可以使用对象的形式

    如果要改变class,则只需要对classObj对象做操作就行了

    但是此时如果增加class,则不会成功

    原因是后面加入的属性并没有被get、set拦截

    三:数组的方式

    接下来只需要对数组做操作就可以改变class了

    删除

    增加

    <!DOCTYPE html>
    <html lang='en'>
    <head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <script src='./vue.js'></script>
    <title></title>
    <style>
    .red {
    background-color: red;
    }

    .yellow {
    background-color: yellow;
    }
    </style>
    </head>
    <body>
    <div id="app">
    <div style="background: yellow">111</div>
    <button @click="handleClick()">点击动态绑定class</button>
    <!-- <div :class="isActive?'red':'yellow'">动态绑定class的三目写法</div>-->
    <!-- <div :class="classObj">动态绑定class的对象写法</div>-->
    <div :class="classArr">动态绑定class的数组写法</div>

    </div>
    <script type="text/javascript">
    let vm = new Vue({
    el: "#app",
    data: {
    isActive: true,
    classObj: {
    'a': true,
    'b': true
    },
    classArr: ['a', 'b']
    },
    methods: {
    handleClick() {
    this.isActive = !this.isActive
    }
    }
    });
    </script>
    </body>
    </html>

    二、绑定style

    1.三目运算符的形式

    二:对象写法

    修改

    如果是带-的属性,则改为驼峰命名法:

    此写法与上面绑定class的方法一样,有个缺点,新增的时候不会被get、set拦截

    三:数组的写法

    需以对象的形式添加style

     

    <!DOCTYPE html>
    <html lang='en'>
    <head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <script src='./vue.js'></script>
    <title></title>
    <style>
    .red {
    background-color: red;
    }

    .yellow {
    background-color: yellow;
    }
    </style>
    </head>
    <body>
    <div id="app">
    <!-- <button @click="handleClick()">点击动态绑定class</button>-->
    <!-- <div :class="isActive?'red':'yellow'">动态绑定class的三目写法</div>-->
    <!-- <div :class="classObj">动态绑定class的对象写法</div>-->
    <!-- <div :class="classArr">动态绑定class的数组写法</div>-->

    <button @click="handleClick()">点击动态绑定style</button>
    <!-- <div :style="'background: '+(isActive?'yellow':'red')">动态绑定style的三目写法</div>-->
    <!-- <div :style="styleObj">动态绑定style的对象写法</div>-->
    <div :style="styleArr">动态绑定style的对象写法</div>
    </div>
    <script type="text/javascript">
    let vm = new Vue({
    el: "#app",
    data: {
    isActive: true,
    styleArr: [],
    styleObj: {
    // font-family:'宋体';">此写法会报错
    backgroundColor: 'red'
    },
    classObj: {
    'a': true,
    'b': true
    },
    classArr: ['a', 'b']
    },
    methods: {
    handleClick() {
    this.isActive = !this.isActive
    }
    }
    });
    </script>
    </body>
    </html>
    讨论群:249728408
  • 相关阅读:
    Python Post四种请求方式
    Python 字符串转Base64编解码
    JS 数组遍历
    FineUI MVC 前端获取表格Json通过Post传递后台
    C# Json转DataTable
    MSSQL 关联更新
    Python selenium Message: session not created: This version of ChromeDriver only supports Chrome version 76
    FineUI MVC 同级新增页签
    Tomcat Tomcat的中文乱码设置
    zabbix-4.0-监控服务器的ping告警设置
  • 原文地址:https://www.cnblogs.com/zhongyehai/p/12336670.html
Copyright © 2020-2023  润新知