• vue 中样式的绑定


    1、class的对象绑定

    //对应的css
    <style>
         .active {
             color: red;
         }
    </style>
    
    <!--html 对应的代码-->
    <div class="container" id="mytest">
        <div class="jumbotron">
            <!--注意:如果需要添加其他静态的class,那么只要在名称上加上引号即可,否则视为变量处理-->
            <div :class="{active:isactive,take:'take'}" @click="change">are you ok???</div>
        </div>
    </div>
    
    
    //javascript对应的代码
    let VM = new Vue({
         el: '#mytest',
         //对应:class里的值
         data: {isactive: false},
         methods: {
             change() {
                  this.isactive = !this.isactive;
            }
         }
    })

    2、class的数组绑定

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <link rel="stylesheet" href="./lib/bootstrap.css">
        <style>
            .active {
                color: red;
            }
        </style>
        <script src="./lib/vue.js"></script>
        <script>
            window.onload = function () {
                let VM = new Vue({
                    el: '#mytest',
                    //对应:class里的值
                    data: {active: ''},
                    methods: {
                        change() {
                            this.active = this.active == '' ? 'active' : ''
                        }
                    }
                })
            }
        </script>
    </head>
    <body>
    <div class="container" id="mytest">
        <div class="jumbotron">
            <!--注意:如果需要添加其他静态的class,那么只要在名称上加上引号即可,否则视为变量处理如下面的类test-->
            <div :class="[active,'test']" @click="change">are you ok???</div>
        </div>
    </div>
    </body>
    </html>

    3、style的对象绑定

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <link rel="stylesheet" href="./lib/bootstrap.css">
        <style>
            .active {
                color: red;
            }
        </style>
        <script src="./lib/vue.js"></script>
        <script>
            window.onload = function () {
                let VM = new Vue({
                    el: '#mytest',
                    data: {
                        activeObj: {
                            color: 'black',
                            'font-size': '20px'
                        }
                    },
                    methods: {
                        change() {
                            this.activeObj.color = this.activeObj.color == 'black' ? 'red' : 'black';
                        }
                    }
                })
            }
        </script>
    </head>
    <body>
    <div class="container" id="mytest">
        <div class="jumbotron">
            <!--用style的对象来绑定样式-->
            <div :style="activeObj" @click="change">are you ok???</div>
        </div>
    </div>
    </body>
    </html>

    4、style的数组绑定

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <link rel="stylesheet" href="./lib/bootstrap.css">
        <style>
            .active {
                color: red;
            }
        </style>
        <script src="./lib/vue.js"></script>
        <script>
            window.onload = function () {
                let VM = new Vue({
                    el: '#mytest',
                    data: {
                        activeObj: {
                            color: 'black',
                            'font-size': '20px'
                        },
                        testObj:{
                            'text-decoration':'underline'
                        }
                    },
                    methods: {
                        change() {
                            this.activeObj.color = this.activeObj.color == 'black' ? 'red' : 'black';
                        }
                    }
                })
            }
        </script>
    </head>
    <body>
    <div class="container" id="mytest">
        <div class="jumbotron">
            <!--用style的数组可以容纳多个对象,可以是vue里data的数据,也可以是行内数据,注意引号-->
            <div :style="[activeObj,testObj,{'font-weight':'bold'}]" @click="change">are you ok???</div>
        </div>
    </div>
    </body>
    </html>

    5、通过委托事件绑定实现

    通过methods里的方法,第一个传值是event,那么通过event.target 或者 event.currentTarget来操作DOM实现类的切换,可结合jquery

  • 相关阅读:
    linux 备份当前文件
    zz Apache 2.2.15 + PHP 5.3.2+ mysql windows环境配置
    zz iframe父子窗口间js方法调用
    批处理命令里获取本机的机器名
    Cache Concurrency Problem False Sharing
    因为添加assembly到GAC引起的Windows Azure Web Role部署失败
    求数组中满足a[i]<a[j]的相距最远的元素
    Dispose模式
    比较汇编指令 LEA 和 MOV
    读写Unicode字符串(UTF8,UTF16…)
  • 原文地址:https://www.cnblogs.com/rickyctbu/p/9755042.html
Copyright © 2020-2023  润新知