基本指令02

作者: 孤星Erwin | 来源:发表于2021-02-08 18:14 被阅读0次

v-show

v-show 指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏，根据表达式的真假，切换元素的display css属性

<div id="app">
    <h3 v-show="flag">
        {{ message }}
    </h3>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            message: "v-show展示",
            flag: false
        }
    })
</script>

v-show.png

v-if

v-if控制元素的显示隐藏方式是直接删除和添加DOM元素

<div id="app">
    <h3 v-if="flag">
        {{ message }}
    </h3>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            message: "v-if展示",
            flag: false
        }
    })
</script>

表达式的值为假时，页面并不添加此DOM元素

v-if.png

结合v-else和v-else-if使用

<h3 v-if="age >= 30 && age < 40">中年</h3>

<h3 v-else-if="age < 25 && age >= 18">青年</h3>

<h3 v-else-if="age < 10 && age >= 0">小孩</h3>

<h3 v-else>要相信光</h3>

v-if和v-show的区别

一、功能区别

同样的实现控制元素的显示和隐藏，v-show严格意义上是“条件隐藏”，把HTML元素先渲染起来，符合条件就显示，不符合条件display就为none，不显示，但是元素还在那。而v-if是真正意义上的“条件渲染”，浏览器先判断符不符合条件，符合了再渲染，否则不渲染DOM，浏览器中找不到这个DOM

二、vue生命周期区别

v-if由于是重新渲染，所以每次切换一次会重新走一次生命周期，v-show由于只是控制显示隐藏，所以除了初始化渲染，其他时候都不会再走相关生命周期了

三、性能区别

1、v-if有更高的切换开销，v-show有更高的初始渲染开销。如果需要频繁的切换，使用v-show比较好，如果运行条件很少改变，使用v-if比较好

2、v-show比v-if性能更高，因为v-show只能动态的改变样式，不需要增删DOM元素。所以当程序不是很大时候，v-if和v-show区别都不大，如果项目很大，推荐多用v-show，较少浏览器后期操作的性能。

v-for

遍历普通数组

v-for中可以使用in 和 of来遍历，在v-for中，这两个没什么区别，都可以使用

在es5/6中，for in 遍历对象，for of 遍历数组

<div id="app">
    <ul>
        <li v-for="(item,index) in arr">索引值：{{index}}------每一项{{item}}</li>
        <hr>
        <li v-for="(item,index) of arr">索引值：{{index}}------每一项{{item}}</li>
    </ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            arr: [1,2,3,4,5,6]
        }
    })
</script>

v-for1.png

遍历对象

v-for="(值,键,索引) in 原对象"

<div id="app">
    <ul>
      <li v-for="(val,key,i) in user">键：{{key}}------值：{{val}}------索引{{i}}</li>
    </ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            user: {
                id: 1,
                name: 'lisa',
                age: 22
            }
        }
    })
</script>

v-for2.png

遍历对象数组

<div id="app">
    <ul>
        <li v-for="(val,i) in user">id：{{val.id}}------name：{{val.name}}------age: {{val.age}}-----索引： {{i}}
        </li>
    </ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            user:[
                {
                    id: 1,
                    name: 'lisa',
                    age: 22
                },
                {
                    id: 2,
                    name: 'bigbang',
                    age: 23
                },
                {
                    id: 3,
                    name: '三毛',
                    age: 24
                }
            ] 
        }
    })
</script>

v-for3.png

遍历数字和字符串

<div id="app">
    <ul>
        <li v-for="n in num">数字: {{n}}</li>
        <hr>
        <li v-for="s in str">字符串：{{s}}</li>
    </ul>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            num: 9,
            str: "今天放假啦"
        }
    })
</script>

v-for4.png

嵌套循环

<div id="app">
    <ul v-for="(item, index) in list">
        <li>
            {{item.name}}
            <ul v-for="(item, index) in item.cList">
                <li>{{item.cname}}</li>
            </ul>
        </li>
    </ul>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            list: [
                {
                    name: '用户管理',
                    cList: [{cname: "添加",},{cname: "删除"}]
                }, {
                    name: '商品管理',
                    cList: [{cname: "添加",},{ cname: "删除"}]
                }, {
                    name: "分类管理"
                }
            ]
        }
    })
</script>

v-for5.png

v-bind

v-bind 用于绑定数据和元素属性

语法：

<a v-bind:href="uhref"></a>

简写：

<a :href="uhref"></a>

动态绑定HTML Class

<style type="text/css">
    .red{
        color: red;
    }
    .italic{
        font-style: italic;
    }
    .bor{
        border: 1px solid blue;
    }
</style>

<div id="app">
    <h3 class="red italic">普通class</h3>

    <h2 :class="['red','italic']">使用数组</h2>

    <h2 :class="['red',{'italic': flag}]">数组中使用对象代替三元表达式</h2>

    <h2 :class="[flag ? 'italic' : 'red']">数组中使用三元表达式</h2>

    <h2 :calss="classObj">使用对象</h2>

    <h2 :calss="{bor:true, italick: flag}">使用对象</h2>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data:{
            flag: true,
            classObj:{
                red: true,
                italic: true,
                bor: false
            }
        }
    })
</script>

动态绑定HTML style

<div id="app">
    <div :style="{color: 'green'}">绑定Style</div>

    <div :style="[sObj1, sObj2]">数组</div>


    <div :style="{color: 'red', fontSize: fz + 'px'}">绑定Style</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>    
    let vm = new Vue({
        el: '#app',
        data: {
            sObj1:{
                color: "pink"
            },
            sObj2: {
                fontSize: "50px",
                "font-size": "60px"
            },
            fz: 10
        }
    })
</script>

v-on

v-on 用于绑定事件

语法：

<button type="button" v-on:click = "num()">+1</button>

简写：

<button type="button" @click = "num()">+1</button>

不传参时，可以直接写函数名

<button type="button" @click = "num">+1</button>

使用{{}}时，必须写圆括号

<button type="button" @click = "{{num()}}">+1</button>

<div id="app">
    <div>点击次数： {{num}}</div>

    <button type="button" v-on:click = "num++">点击+1</button>

    <button type="button" v-on:dblclick = "num--">双击-1</button>

    <button type="button" @click = "clicktwo()">只能加两次</button>

    <p>{{msg}}</p>


    <button type="button" @click = "rString">反转</button>

    <span>{{testString()}}</span>

</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data:{
            num: 0,
            msg: 'abcdefg'
        },
        methods: {
            testString: () => {
                let hobby = ["王者荣耀", "绝地求生", "跑跑卡叮叮车"];
                return hobby;
            },
            clicktwo: () => {
                console.log('this == vm=======>',this == vm);
                let n = vm.num;
                vm.num = Math.min(++n,2)
            },
            rString(){
                this.msg = this.msg.split('').reverse().join('');
            }
        }
    })
</script>

v-on传参

<div id="app">
    <!-- 不加括号绑定事件，默认情况下第一个形参就是事件对象 -->
    <button @click="test">没加括号</button>
    <!-- 加了括号，无论你传不传实参，形参默认就是要接收你传递的实参 -->
    <button @click="test()">加了括号</button>
    <button @click="test(123)">传参</button>
    <button @click="rev($event, '手动传递事件对象')">手动传递时间对象</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            num: 0,
            msg: "abcdefg"
        },
        methods:{
            test(ev){
                console.log('ev=======>',ev);
            },
            rev(ev,str){
                console.log('str=======>',str);
                console.log('ev=======>',ev);

            }
        }
    })
</script>

v-on绑定多个事件

<div id="app">
    <button v-on="{click:click, dblclick:dbclick}">绑定了多个事件</button>
</div>
<script>
    new Vue({
        data(){
            return{
                num: 0,
                msg: 'dddd'
            }
        },
        methods: {
            click(){
                console.log('时间出发了=======>');
            },
            dbclick(){
                console.log('双=======>');
            }
        },
    }).$mount('#app')
</script>

按键修饰符

<div id="app">
    <input type="text" @keyup = "show($event)">
    <p>键盘事件@keydown</p>
    <input type="text" @keydown="show($event)" />
    <p>.enter</p>
    <input type="text" @keydown.enter="show($event)" />
</div>
<script>
    new Vue({
        data(){
            return{
                msg: '',
            }
        },
        methods:{
            show(e){
                console.log('e.keyCode=======>',e.keyCode);
                console.log('e=======>',e);

            }
        }
    }).$mount("#app")
</script>