• 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

  • 相关阅读:
    ubuntu之路——day14 只用python的numpy在底层实现多层神经网络
    2019春 软件工程 助教总结
    ubuntu之路——day13 只用python的numpy在较为底层的阶段实现单隐含层神经网络
    ubuntu之路——day12.1 不用tf和torch 只用python的numpy在较为底层的阶段实现简单神经网络
    ubuntu之路——day11.7 end-to-end deep learning
    ubuntu之路——day11.6 多任务学习
    ubuntu之路——day11.5 迁移学习
    mysql 主从复制 (1)
    Windows下Nginx的启动、停止、重启等命令
    mysql-5.7.17-winx64压缩版的安装包下载和安装配置
  • 原文地址:https://www.cnblogs.com/rickyctbu/p/9755042.html
Copyright © 2020-2023  润新知