Vue.js核心指令解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43518382/article/details/103947835

1、vue的v-for语法可以遍历那些值，分别写出遍历不同值的代码。

迭代数字：

<p v-for="i in 10">这是第 {{i}} 个P标签</p>

迭代data中的数组

<p v-for="(val, i) in list">索引：{{i}}  姓名：{{item.name}}  年龄：{{item.age}}</p>

迭代data中的对象

<div v-for="(val, key, i) in cat">{{val}} --- {{key}} --- {{i}}</div>

2、v-model和v-bind的差别

v-bind适用于各种标签与属性，同样是绑定属性，v-bind是单向绑定，只能将vm的data中的数据显示到视图V中，且可以绑定不同属性名，适用于各种标签属性。

v-model仅适用于input、select等表单元素的value属性，且这种绑定是双向的，能从data中读取数据设置为自身的value值，也能将自己value属性的值改变体现到data中。

3、v-show和v-if的差别

v-if 的特点：每次都会重新删除或创建元素

v-show 的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式

v-if 有较高的切换性能消耗

v-show 有较高的初始渲染消耗

如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show

如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if

4、将M中数据设置为标签的类有几种方式？就每种方式写出样例代码。

3种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a {
            font-size: 20px;
        }
        .b {
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <!--将字符串直接设置给class-->
    <div :class="cStr">字符串设置class</div>
    <div :class="cObj">对象设置class</div>
    <div :class="{a:flag,b:flag}">对象设置class</div>
    <button @click="flag = !flag">点我改变flag的在值</button>
    <div :class="cArray">数组设置class</div>
</div>
<script src="js/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            cStr:'a b c',
            flag:true,
            cObj:{ //当对象与class属性绑定的时候，会将对象中true的属性名设置为标签的类
                a:true,
                b:false,
                c:true,
            },
            cArray:['a b c','d','e',{e:true,g:false}],
        }
    });
</script>
</body>
</html>