Vue如何对样式进行操作以及响应式和非响应式的情况

样式操作

原理：Vue样式操作，其实就是对style属性和class属性进行绑定，达到动态更改其属性值的目的

第一种方式：通过绑定字符串改变样式

<div>
        <input type="button" value="变" @click=" change ">
        <p v-bind:style="s " v-bind:class="className">啦啦啦</p>
        <p v-bind:style="'width:'+w+'px;height:200px;background-color:red'">啦啦</p>
    </div>

    let vm = new Vue({
        el: "div ",
        data: {
            s: "width:200px;height:200px;background-color:red ",
            className: "box ",
            w: 200
        },
        methods: {
            change() {
                this.w += 50
            }
        }
    })

ps：缺点是不方便对样式中的具体数据进行动态修改操作

---

第二种方式：style属性使用对象改变样式

<div>
        <input type="button" @click="change">
        <p v-bind:style="{width:w+'px',height:h+'px',backgroundColor:'red'}"></p>
        <p v-bind:style="obj"></p>
    </div>

 let vm = new Vue({
        el: "div",
        data: {
            w: 300,
            h: 200,
            obj: {
                width: "200px",
                height: "300px",
                backgroundColor: "red"
            }
        },
        methods: {
            change() {
                // this.w += 20;
                // this.h += 30;
                this.obj.width = parseInt(this.obj.width) + 20 + "px"
            }

        }
    })

ps：优点是可以修改对象中的具体数据，从而改变样式

class属性使用对象改变样式

 <div>
        <input type="button" value="变" @click="change">
        <p v-bind:class="{p1:check,p2:check2}"></p>
 </div>

  let vm = new Vue({
        el: "div",
        data: {
            check: true,
            check2: true
        },
        methods: {
            change() {
                this.check2 = !this.check2
            }
        }
    })

ps：根据布尔值，决定是否渲染该class属性

---

第三种方式：style属性使用数组改变样式

<div>
            <input type="button" value="变">
            <p v-bind:style="[obj,obj2]"></p>
        </div>

let vm = new Vue({
        el: "div",
        data: {
            obj: {
                width: "200px",
                height: "300px",
            },
            obj2: {
                backgroundColor: "red"
            }
        }
    })

ps：数组中可以存放多个data对象 

class属性通过数组改变样式

<style>
            .box {
                width: 200px;
                height: 200px;
                background-color: pink;
            }

            .p1 {
                background-color: gold;
            }

            .p2 {
                width: 500px;
            }
        </style>

    <div>
            <input type="button" value="变" @click="change">
            <p class="box" v-bind:class="[check,check2]"></p>
        </div>

let vm = new Vue({
        el: "div",
        data: {
            check: "p1",
            check2: ""
        },
        methods: {
            change() {
                this.check2 = this.check2 == "" ? "p2" : ""
            }
        }
    })

ps：数组中可以存放多个data数据，对应的是一个class名 

---

vue中的响应式和非响应式

响应式：数据a发生变化，会使得依赖数据a的数据和界面都会发生变化

非响应式：数据a发生变化，而依赖该数据的地方没有变化
 

非响应式的几种情况（写在methods里的方法）

使用了非变异方法

this.books.concat("西游记");

使用了数组下标改变元素

 this.books[1] = "水浒传";

给vue对象添加了新属性

 this.str="hello";

几种解决方式

this.books = this.books.concat("水浒传");
this.books.splice(1,1,"水浒传")
this.$forceUpdate() 强制刷新
this.$set(this.books, 1, "水浒传")