绑定样式

CSS样式

写法：:class="xxx" xxx可以是字符串、数组、对象

字符串写法适用于类名不确定，需要动态获取

数组写法适用于需要绑定多个样式，个数不确定，名字也不确定

对象写法适用于需要绑定多个样式，个数确定，名字确定，但是用不用不确定

style内联样式

:style="{fontSize:xxx}" 其中xxx时动态值

:style="a/b" 其中a、b是样式对象

<div id="root">
    <!-- 绑定class样式，字符串写法，适用于样式的类名不确定，需要动态指定 -->
    <div class="basic" :class="a" @click="setStyle">{{name}}</div><br>
    <!-- 绑定class样式，数组写法，适用于样式的个数不确定、名字也不确定 -->
    <div class="basic" :class="arr">{{name}}</div><br>
    <!-- 绑定class样式，对象写法，适用于样式的个数确定、名字也确定，但是要动态决定用不用 -->
    <div class="basic" :class="obj1">{{name}}</div><br>

    <!-- 绑定内联(style)样式 对象写法 -->
    <div class="basic" :style="styleObj">{{name}}</div><br>
     <!-- 绑定内联(style)样式 数组写法 -->
     <div class="basic" :style="objArr">{{name}}</div>
</div>
<script>
    new Vue({
        el:'#root',
        data:{
            name:'稀土掘金',
            a:'basic',
            arr:['happy','sad','normal'],
            obj1:{
                happy:false,
                sad:false
            },
            styleObj:{
                fontSize:'20px'
            },
            objArr:[
                {
                    fontSize:'50px'
                },
                {
                    backgroundColor:'red'
                }
            ]
        },
        methods:{
            setStyle(){
                const arr = ['happy','sad','normal']
                let index = Math.floor(Math.random() * arr.length);
                console.log(index);
                this.a = arr[index];
            },
        }
    })
</script>

条件渲染

v-if

v-if="表达式" true则显示,false则隐藏

v-else-if="表达式" true则显示,false则隐藏

v-if="表达式" true则显示,false则隐藏

适用于：切换频率比较低的场景

特点：不展示的DOM元素，直接被移除

注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断，意思是多个元素中间不能有间隔

v-show

v-show="表达式" true则显示,false则隐藏

适用于：切换频率比较高的场景

特点：不展示的DOM元素未被移除，仅仅是使用样式被隐藏了

注意

使用v-if时，元素可能无法获取到，但是使用v-show一定可以获取到

<div id="root">
    <h2>当前n的值为：{{n}}</h2>
    <button @click="n++">点我n+1</button>
    <!-- 使用v-show做条件渲染 -->
    <!-- <h2 v-show="n>=1">1111</h2>
    <h2 v-show="n===2">2222</h2> -->

    <!-- 使用v-if做条件渲染 -->
    <!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
    <!-- <h2 v-if="1===1">欢迎来到{{name}}</h2> -->

    <!-- 使用v-else-if和v-else做条件渲染 -->
    <!-- <h2 v-if="n>10">111</h2> -->
    <!-- <h2 v-else-if="false">222</h2> -->
    <!-- <h2 v-else-if="false">333</h2> -->
    <!-- <h2 v-else>444</h2> -->

    <!-- template就是模板的意思，在页面显示中不会显示，但是可以使用v-if来控制内部的元素是否显示，v-show不可以在template中设置 -->
    <template v-if="n===2">
        <h2>111</h2> 
        <h2>222</h2>
        <h2>333</h2>
        <h2>444</h2>
    </template>
</div>
<script>
    new Vue({
        el:'#root',
        data:{
            name:'稀土掘金',
            n:0
        },
    })
</script>

列表渲染

v-for

1、用于展示列表数据

2、语法：v-for="(item, index) in xxx" :key="yyy"

3、可以遍历数组、对象、字符串，还能遍历指定次数

<div id="root">
    <!-- 测试遍历数组 -->
    <ul>
        <li v-for="(p,key) in persons" :key="key">{{p.name}} : {{p.age}} : {{p}}</li>
    </ul>
    <!-- 测试遍历对象 -->
    <ul>
        <li v-for="(car,key) in car" :key="key">{{key}} : {{car}}</li>
    </ul>
    <!-- 测试遍历字符串 -->
    <ul>
        <li v-for="(str,key) in str" :key="key">{{key}} : {{str}}</li>
    </ul>
     <!-- 测试遍历指定次数 -->
     <ul>
        <li v-for="(number,index) in 5" :key="index">{{index}} : {{number}}</li>
    </ul>
</div>


<script>
    new Vue({
        el:'#root',
        data:{
            persons:[
                {id:'001',name:'赵云',age:18},
                {id:'002',name:'张飞',age:55},
                {id:'003',name:'倚天',age:6}
            ],
            car:{
                name:'奥迪',
                price:'18万',
                color:'黑色'
            },
            str:"helloworld"
        }
    })
</script>

react和vue中key的内部原理

虚拟DOM中key的作用

key时虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，然后Vue把新的虚拟DOM和旧的虚拟DOM进行差异比较

比较规则：

当旧的虚拟DOM中找到了和新的虚拟DOM中相同的key时

1、如果两个虚拟DOM中的内容一样，没有变化，就直接使用旧的真实DOM

2、如果两个虚拟DOM中的内容不一样，发生了变化，则生成新的真实DOM，然后替换掉页面中旧的真实DOM

3、注意：不同的元素会分开比较

当旧的虚拟DOM中没有找到和新的虚拟DOM中相同的key时

1、则创建新的真实DOM，然后渲染到页面中

使用index作为key可能会发生的问题

如果对数据进行逆序添加、逆序删除等破坏顺序的操作，就会产生没有必要的真实DOM的更新，会导致效率变低

如果结构中还包含输入类的DOM，就会产生错误的真实DOM的更新，就会导致页面出现问题

在开发中如何选择key

最好使用每条数据的唯一标识作为key值，如：id、手机号、身份证号、学号等唯一的值

如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅仅是渲染列表进行展示，那么使用index作为key是没有问题的