vue属性和样式的绑定-CSDN博客

本文链接：https://blog.csdn.net/weixin_47683287/article/details/109325167
vue属性和样式的绑定

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <script src="vue/vue.js"></script>
        <style>
            .big{
                width: 200px;
                height: 100px;
                background-color: chartreuse;
            }
            .yans{
                color: crimson;
            }
            .a{
                width: 300px;
                height: 100px;
                background-color: brown;
            }
            .b{
                color: floralwhite;
            }
        </style>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div id="app">
            <div v-bind:style = "{color:colorStyle,width:widthStyle,height:heightStyle,backgroundColor:backgroundColorStyle}">样式style对象绑定普通形式</div>
            <div v-bind:style = "objStyles">样式style对象绑定简写形式</div>

            <div v-bind:class = "{big:isBig}">样式class对象绑定普通形式</div>
            <button v-on:click = "dianji">点击切换</button>
            <div v-bind:class = "objClasses">样式class对象简写绑定</div>

            <div v-bind:class = "[aClass]">样式class数组普通绑定形式</div>
            <div v-bind:class = "arrClasses">样式class数组简写绑定形式</div>

            <a v-bind:href="url">点击</a>
            
        </div>

        <!-- 
            样式绑定style对象形式：
            <标签 v-bind:style = "{样式名：样式值(在data中定义赋值)...}"> </标签>
            例：<div v-bind:style = "{color:colorStyle,width:widthStyle,height:heightStyle}">你好啊</div>
                赋值形式： data:{
                        colorStyle:'red',
                        widthStyle:'100px',
                        heightStyle:'100px',
                        backgroundColorStyle:'yellow',
                    }
            简写style对象形式：提供一个大变量对象objStyle，里面存样式对象
            例：<div v-bind:style = "objStyles">样式style对象绑定简写形式</div>
                赋值形式：  objStyles:{
                            color:'red',
                            width:'200px',
                            height:'200px',
                            backgroundColor:'skyblue',
                        }

            样式绑定class对象形式:
            <标签 v-bind:class = "{类名：is类名(首字母大写在data中声明赋值)....}"> </标签>
            在data中，is(类名)的值为true和fales，true为加入类，false为移除类
            例：<div v-bind:class = "{big:isBig}">样式class对象绑定简写形式</div>
                赋值形式： isBig:true
                            dianji:function(){
                                    this.isBig = !this.isBig
                                }

            简写class对象绑定形式，提供一个大变量对象objClasses，保存类名
            例：<div v-bind:class = "objClasses">样式class对象简写绑定</div>
                赋值形式： objClasses:{
                            big:true,
                            yans:true
                        }
                更改：this.objClasses.big = false 示例
            
            样式绑定class数组形式：
            <div v-bind:class = "[类名Class，.....]">样式class对象绑定简写形式</div>
            例：<div v-bind:class = "[aClass]">样式class数组普通绑定形式</div>
              赋值形式：aClass:'a',
              移除样式：令类名Class ：' ',就行
              
            简写class数组绑定形式，提供一个大变量数组arrClasses，存放类名 
            例：<div v-bind:class = "arrClasses">样式class数组简写绑定形式</div>
               赋值形式：arrClasses:['a','b']


            元素属性的绑定形式：
                <a v-bind:href="url">点击</a>





         -->
        
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    url:'',
                    colorStyle:'red',
                    widthStyle:'100px',
                    heightStyle:'100px',
                    backgroundColorStyle:'yellow',
                    objStyles:{
                        color:'red',
                        width:'200px',
                        height:'200px',
                        backgroundColor:'skyblue',
                    },
                    // style以上
                    isBig:true,
                    objClasses:{
                        big:true,
                        yans:true
                    },
                    // class对象以上
                    aClass:'a',
                    arrClasses:['a','b']

                },
                methods:{
                    dianji:function(){
                        this.isBig = !this.isBig
                    }
                }

            })
        </script>
    </body>
</html>