VUE之指令，组件

一：指令集

（1）v-once

（1）作用：

　　（1）使得标签内部的属性一旦被赋值便不可以被更改

　　（2）如果是input框可以主动输入数据进行更改

（2）使用方式

<div id="app">
    <!--    其不加 v-once input框内数据可以更改-->
    <p><input type="text" v-model="num"></p>
    <!--    其加了v-once input框内数据不能随着别的数据变动而变动 但是可以主动变动-->
    <p><input type="text" v-model="num" v-once></p>
<!--    无论标签内部数据是否变动 其都不会变动-->
    <p v-once>{{num}}</p>
</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            num: 0
        },
    })
</script>

v-once使用方式

（2）v-cloak

（1）作用：防止页面闪烁

<style>
    [v-cloak] {
        display: none;
    }
</style>
<!-- 不处理的情况下，每次新价值该页面，都会先渲染{{}}，当vue环境加载成功，{{}}有会被解析消失 -->
<!-- 处理后，vue环境没加载好时，#app是被隐藏的，vue环境加载成功，会依次#app的v-cloak属性，就不会出现{{}}渲染闪烁问题 -->
<div id="app" v-cloak>
    {{ }}
    {{ }}
    {{ }}
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
    })
</script>

v-cloak使用方式

（3）v-if与v-show

（1）作用：

　　（1）可以控制标签的显隐

　　（2）绑定的都是布尔值

　　（3）v-if不会渲染标签

　　（5）v-show会以{display:none}的形式隐藏标签

<div id="app">
    <!--    其下方布尔值对应为false不会再页面渲染出来 且检测内部html标签也不会被渲染-->
    <p v-if="is_show">if标签渲染</p>
    <!--    其下方布尔值对应为false不会再页面渲染出来 检测内部html标签会以display：none的形式渲染-->
    <p v-show="is_show">show标签渲染</p>
</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            is_show: false
        }
    })
</script>

v-if与v-show对比展示

（4）v-if条件判断

（1）作用：

　　（1）类似于条件语句进行逻辑判断

（2）使用方式：

v-if = '布尔值'
v-else-if = '布尔值'
v-else 
PS：v-else没有条件 上述条件都不成立 走else条件

<div id="app">
<!--    情况一 v-if布尔值为真 只有其才会进行页面渲染-->
    <p v-if="0">if条件语句运行</p>
<!--    情况二 v-else-if布尔值为真 其余都为假 只有其才会进行页面渲染-->
    <p v-else-if="0">else-if条件语句运行</p>
<!--    情况三 上述if条件都为假 else会进行渲染 且只要if条件对应的布尔值为假 无论else对应的布尔值如何 都会进行渲染-->
    <p v-else>else条件语句运行</p>
</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
    })
</script>

v-if基本使用方式

    <style>
        .box {
            width: 400px;
            height: 300px;
        }

        .r {
            background-color: red;
        }

        .y {
            background-color: yellow
        }

        .b {
            background-color: blue;
        }

    </style>
</head>
<body>
<div id="app">
    <div class="em">
        <p>
            <!--            点击事件 此时点击红 页面显示红色框 以此类推-->
            <button @click="chang_box('rbox')">红</button>
            <button @click="chang_box('ybox')">黄</button>
            <button @click="chang_box('bbox')">蓝</button>
        </p>
        <!--    页面渲染三个框   根据showname对应的值不同进行不同的页面渲染 -->
        <div class="box r" v-if="showname=='rbox'"></div>
        <div class="box y" v-else-if="showname=='ybox'"></div>
        <div class="box b" v-else="showname=='bbox'"></div>

    </div>
</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            // 默认渲染红色
            showname: 'rbox'
        },
        methods: {
            // 上述点击事件会进行传参 当传参的参数赋值给函数 函数将传值赋值给showname
            chang_box(name) {
                this.showname = name
            }
        }
    })
</script>

边框渲染LowB版本

一：指令集

（1）v-once

（2）v-cloak

（3）v-if与v-show

（4）v-if条件判断

猜你喜欢