zoukankan      html  css  js  c++  java
  • vue中的样式绑定

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue中的样式绑定</title>
        <script src="./vue.js"></script>
        <style>
            .activated {
                color: red;
            }
            .activated-one{
                font-size: 78px;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <div @click='handleDivClick'
             :class="[activated,activatedOne]">
            <!--:class = "{activated:isActivated}"-->
            <!--class对象绑定-->
            hello world
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                // isActivated:false
                activated: '',
                activatedOne:''
            },
            methods: {
                handleDivClick: function () {
                    // this.isActivated = !this.isActivated  //取反
                    // if (this.activated === "activated") {
                    //     this.activated = '';
                    // } else {
                    //
                    //     this.activated = "activated";     //代码过于冗余
                    // }
                    this.activated = this.activated === "activated" ? "" : "activated"  //三元表达式
                    this.activatedOne = this.activatedOne === "activated-one" ? "" : "activated-one"  //三元表达式
                }
            }
    
        })
    </script>
    </body>
    </html>
    
    <!--
    两种方法:一个对对象进行绑定,一个是对数组进行绑定
    -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue中内联样式绑定</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!--<div :style="styleObj" @click="handleDivClick">-->
            <div :style="[styleObj,{fontSize:'20px'}]" @click="handleDivClick">
                hello world
            </div>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                  styleObj:{
                      color:"black"
                  }
                },
                methods:{
                    handleDivClick:function () {
                        this.styleObj.color = this.styleObj.color === 'black' ? "red" : "black";
                    }
                }
            })
        </script>
    </body>
    </html>
    
    <!--
    两种方法:一个对对象进行绑定,一个是对数组进行绑定
    -->
  • 相关阅读:
    H5本地存储
    小知识(h5 js )
    在ubuntu18.04版本安装vscode
    函数基本操作
    python直接赋值、深浅拷贝实例剖析
    collections模块简介
    set()集合基本操作
    list、tuple、dict内部功能释义
    str内部方法释义
    int内部方法释义
  • 原文地址:https://www.cnblogs.com/xuyxbiubiu/p/9961960.html
Copyright © 2011-2022 走看看