zoukankan      html  css  js  c++  java
  • 4.起步VUE,样式绑定

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
        <div  :style="styleObj" @click="Z6">//:style相当于v-bind:style
        HelloWorld
        </div>
        </div>
        <script>
            var app=new Vue({
                el:'#app',
                data:{
                    styleObj:{
                        color:"red"
                    }
                },
                method:{
                    Z6:function(){
                        this.styleObj.color=this.styleObj.color==="black"?"red":"black";
                    }
                }
    
    
            })
    
        </script>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./vue.js"></script>
        <style>
            .activated{
                color: red;
            }
            .zg{
                color: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div @click="handleDivClick"
            
            v-bind:class="{activated: isActivated}"
            >HelloWorld
        </div>
        <div v-on:click="ZhangGong"
        :class="[zg]">
            ZhangGong
        </div>
        </div>
        <script>
            var vm=new Vue({
                el:"#app",
                data:{
                    isActivated:false,
                    zg:""
                },
                methods:{
                    handleDivClick:function(){
                        this.isActivated=!this.isActivated
                    },
                    ZhangGong:function(){
                        if(this.zg==="zg"){
                            this.zg="";
                        }else{
                            this.zg="zg";
                        }
                    }
                }
    
    
            })
        </script>
    </body>
    </html>
  • 相关阅读:
    关于this的指向问题
    blued面经
    数美(sm)面经
    xue球 面经
    jquery中的$("#id")与document.getElementById("id")的区别
    如何知道iframe文件下载download完成
    前端linux基础
    Vue.js 初级面试题
    React 面试题
    从输入URL到页面加载的过程
  • 原文地址:https://www.cnblogs.com/tilyougogannbare666/p/14376920.html
Copyright © 2011-2022 走看看