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

Posted 2020-11-04 毛台

条件渲染: 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>