[vue]vue条件渲染v-if(template)和自定义指令directives

最新推荐文章于 2025-03-30 07:44:45 发布

转载最新推荐文章于 2025-03-30 07:44:45 发布 · 530 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/iiiiiher/p/9025532.html

文章标签：

#javascript #ViewUI

本文介绍Vue中条件渲染的使用方法，包括v-if、v-else、v-show及template标签的应用，并演示如何创建自定义指令以增强应用功能。

条件渲染: v-if/template

<div id="app">
    <h1>v-show: display: none</h1>
    <div v-show="false">yes</div>
    <!--<div v-else>no</div>-->


    <h1>v-for: 判断1</h1>
    <div v-if="false">yes</div>
    <div v-else>no</div>

    <h1>判断2</h1>
    <div v-if="msg">yes</div>
    <div v-else>no</div>

    <h1>判断3: 不能这样写, 正确做法是v-if和v-else之间无其他内容</h1>
    <div v-if="msg">yes</div>
    <div>somethings</div>
    <div v-else>no</div>

    <h1>判断4: 如果v-if和v-else必须要有其他内容: 建议template实现</h1>
    <div v-if="true">
        <div>yes</div>
        <div>somethings</div>
    </div>
    <div v-else>no</div>

    <h1>判断5</h1>
    <template v-if="true">
        <div>yes</div>
        <div>somethings</div>
    </template>
    <div v-else>no</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: false,
        }
    })
</script>

自定义指令directives

an official order or instruction

- vue有 1,模板类  2,表单类 3,事件类的各种指令 4.还可以自定义指令

<div id="app">
    <h1>自定义指令: directives</h1>
    <input type="text" v-focus>
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "maotai",
        },
        directives: {
            focus: {
                inserted: function (el) {
                    el.focus();
                }
            }
        }
    })
</script>

转载于:https://www.cnblogs.com/iiiiiher/p/9025532.html