VUE入门到实战--Vue样式绑定_var vue =new vue({ my-component-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_37968345/article/details/82983597

1、样式绑定

1.1、class对象绑定

1、对象绑定有下面这几种：对象内联绑定，对象外联，计算属性。

2、对象内联绑定：通过在元素上使用class与某个对象绑定，通过对象的属性值来控制样式的显示与否。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .activated {
            color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">
        <div @click="handleDivClick"
            :class="{activated:isActivated}" 
        ><!--这个div绑定了一个名字叫做activated的class，这个样式的显示与否取决于isActivated-->
            Hello World
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isActivated: false,//isActivated控制样式的显示与否
            },
            methods: {
                handleDivClick:function() {
                    this.isActivated=!this.isActivated;
                }
            }
        })
    </script>
</body>
</html>

3、对象外联：绑定的数据对象不必内联定义在模板里：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .activated {
            color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">
        <div @click="handleDivClick"
            :class="classObj" 
        ><!--1、这里使用的就是一种外联对象-->
            Hello World
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                //2、外联对象中的键值对是CSS选择器：true/false
                classObj: {
                    activated: false,
                }
                
            },
            methods: {
                handleDivClick:function() {
                    this.classObj.activated = !this.classObj.activated;
                }
            }
        })
    </script>
</body>
</html>

4、渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .activated {
            color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">
        <div @click="handleDivClick"
            :class="classObj" 
        ><!--1、这里使用的就是一种计算属性-->
            Hello World
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isAcitve: true,
                error: false, 
            },
            computed: {
                //2、计算属性的返回值就是个对象，对象中的键值对还是CSS选择器：true/false（表达式决定）
                classObj: function() {
                    return {
                        activated: this.isAcitve&&this.error,
                    }
                }
               
            },
            methods: {
                handleDivClick:function() {
                   this.error = !this.error;
                }
            }
        })
    </script>
</body>
</html>

5、扩充：当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。比如说下面这两个例子

<my-component class="baz boo"></my-component>
    ...
Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

//上面两者将被渲染成为：
<p class="foo bar baz boo">Hi</p>

<my-component v-bind:class="{ active: isActive }"></my-component>
    ...
Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

//上面两者被渲染为：
<p class="foo bar active">Hi</p>

1.2、class数组绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .changeRed {
            color: red;
            cursor: pointer;
        }
        .changeBig {
            font-size: 1.5em;
        }
        .line {
            text-decoration-line: underline;
        }
    </style>
</head>
<body>
    <div id="app">
        <div @click="handleDivClick"
            :class="[activatedone,activatedtwo]" 
        ><!--将样式的控制用一个数组来表示，数组中可以有多个元素，每个元素又可以对应多个CSS样式名称-->
            Hello World
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                activatedone: "", //变量的值就是CSS样式的名称
                activatedtwo: "",
            },
            methods: {
                handleDivClick:function() {
                    this.activatedone=this.activatedone==="changeRed changeBig"?"":"changeRed changeBig";//重复变化
                    this.activatedtwo=this.activatedtwo==="line"?"":"line";
                }
            }
        })
    </script>
</body>
</html>

1.3、style对象绑定样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue样式绑定style</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app"><!--这将style绑定在一个js表达式，而这个JS表达式是个对象-->
        <div :style="styobj" @click="handleBtnClick">
            hello world
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                styobj: {/*这里就像写原生一样写CSS就行了*/
                    color: "black",
                    cursor: "pointer",
                }
            },
            methods: {
                handleBtnClick:function() {
                    this.styobj.color=this.styobj.color==="black"?"red":"black";
                }
            }
        })
    </script>
</body>
</html>

1.4、style数组绑定样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue样式绑定style</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app"><!--这将style绑定在一个数组中，数组中每个元素又是JS对象-->
        <div :style="[styobj,{fontSize:'20px'}]" @click="handleBtnClick">
            hello world
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                styobj: {/*这里就像写原生一样写CSS就行了*/
                    color: "black",
                    cursor: "pointer",
                }
            },
            methods: {
                handleBtnClick:function() {
                    this.styobj.color=this.styobj.color==="black"?"red":"black";
                }
            }
        })
    </script>
</body>
</html>