vue学习笔记系列（四）：Vue中的样式绑定

2019-01-03 本文已影响6人 i高安

今天上午去上了大学生涯中最后一堂课，又开了一下午的会，基本今天没学到什么东西，简单记录一下吧。

模板语法

v-text与{{差值表达式}}的功能一样，v-html可以直接输出html页面

<!--插值表达式-->
<!--<div id="app">-->
    <!--{{name}}-->
<!--</div>-->

<!-- v-text  v-html   -->

<!--   v-text与{{差值表达式}}的功能一样  -->
<div id="app">
    <div>{{name}}</div>
    <div v-text="name"></div>
    <div v-html="name"></div>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            name:"<h1>Test</h1>"
        }
    })
</script>

计算属性，方法，侦听器

有三种方法可以绑定属性，computed:

//计算属性，具有缓存，如果依赖的值没有发生改变则不会再计算
        computed:{
            fullName:function () {
                console.log("计算了一次");
                return this.firstName + " " + this.lastName
            }
        }

watch:

//侦听器
        watch:{
            firstName: function () {
                console.log("计算了一次");
                this.fullName = this.firstName + " " + this.lastName;
            },
            lastName: function () {
                console.log("计算了一次");
                this.fullName = this.firstName + " " + this.lastName;
            }
        }

方法,methods:

//方法 计算的效率没有计算属性的效率高
        methods:{
            fullName:function () {
                return this.firstName + " " + this.lastName
            }
        }

demo代码块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性，方法，侦听器</title>
    <script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
</head>
<body>
<!--用插值表达式  可以直接调用方法里面定义的函数-->
 <!--<div id="app">-->
     <!--{{fullName}}-->
     <!--{{age}}-->
 <!--</div>-->

<!--demo-->
<div id="app">
    <p>Original message:"{{ message }}"</p>
    <p>Computed reversed message:"{{ reversedMessage }}"</p>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            firstName:"Dell",
            lastName: "Lee",
            fullName:"Dell Lee",
            age:28,
            message:'Hello World!'
        },

        //这三种方法，computed的效率最高

        //侦听器
        // watch:{
        //     firstName: function () {
        //         console.log("计算了一次");
        //         this.fullName = this.firstName + " " + this.lastName;
        //     },
        //     lastName: function () {
        //         console.log("计算了一次");
        //         this.fullName = this.firstName + " " + this.lastName;
        //     }
        // }

        //方法 计算的效率没有计算属性的效率高
        // methods:{
        //     fullName:function () {
        //         return this.firstName + " " + this.lastName
        //     }
        // }

        //计算属性，具有缓存，如果依赖的值没有发生改变则不会再计算
        // computed:{
        //     fullName:function () {
        //         console.log("计算了一次");
        //         return this.firstName + " " + this.lastName
        //     }
        // }


        //demo
        computed: {
            reversedMessage:function () {
                //this 指向 vm 实例
                //split()方法用于把一个字符串分割成字符串数组
                return this.message.split('').reverse().join('')
            }
        }
    })

计算属性的setter和getter

    <div id="app">{{fullName}}</div>

<script>
    var vm = new Vue({
        el: "#app",
        data:{
            firstName: "Dell",
            lastName: "Lee"
        },
        //当依赖的值发生变化时，computed会发生改变
        computed:{
            fullName: {
                get:function () {
                    return this.firstName + " " + this.lastName
                },
                set:function (value) {
                    var arr = value.split(" ");
                    this.firstName = arr[0];
                    this.lastName  = arr[1];
                }
            }
        }
    })
</script>

样式绑定

需求：
点击页面上的字符串，点一下变成红色，再点一下回到原来的颜色，如此反复。

1.监听class，点击之后更改状态，显示绑定的style

<!--activated显示与否取决于后面的变量为true还是false-->
    <div id="app">
        <div @click="handleDivClick" :class="{activated:isActivated}">
            Hello world!
        </div>
    </div>

var vm = new Vue({
        el:"#app",
        data:{
            isActivated:false
        },
        methods:{
            handleDivClick:function () {
                this.isActivated = !this.isActivated
            }
        }
    })

2.给class绑定数组，可以绑定多个数组

<!--class绑定数组  可以绑定多个数组-->
    <div id="app">
        <div @click="handleDivClick" :class="[activated, activatedOne]">
            Hello world!
        </div>
    </div>

var vm = new Vue({
        el:"#app",
        data:{
            // styleObj:{
            //     color:"black"
            // }
            activated:"",
            activatedOne:"activated_one"
        },
        // methods:{
        //     handleDiveClick:function () {
        //         this.styleObj.color = this.styleObj.color === "black" ? "red" : "black"
        //     }
        // }
        methods:{
            handleDivClick:function () {
                //三元运算符，减少代码冗余  如果this.activated === activated 那么置空
                //否则置为activated
                this.activated = this.activated === "activated" ? "" : "activated"
            }
        }
    })

3.直接绑定样式，定义点击函数

<div id="app">
    <div :style="[styleObj,{fontSize:'20px'}]" @click="handleDiveClick">
        Hello world!
    </div>
</div>

var vm = new Vue({
        el:"#app",
        data:{
            styleObj:{
                color:"black"
            }
            // activated:"",
            // activatedOne:"activated_one"
        },
        methods:{
            handleDiveClick:function () {
                this.styleObj.color = this.styleObj.color === "black" ? "red" : "black"
            }
        }
        // methods:{
        //     handleDivClick:function () {
        //         //三元运算符，减少代码冗余  如果this.activated === activated 那么置空
        //         //否则置为activated
        //         this.activated = this.activated === "activated" ? "" : "activated"
        //     }
        // }
    })

在使用三元运算符的时候一脸懵，后来想了半天才想起来....惭愧...惭愧...