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

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