vue簡單指令筆記

v-once 執行一次性插值，數據改變插值處內容不會更新

<span v-once>這個將不會改變: {{ msg }}</span>

v-text 插入文本

<!--兩行效果相同--!>
<h1>{{ message }}</h1>
<h1 v-text="message"></h1>

v-html 插入html代碼

<p v-html="msgs"></p>

data () {
    return {
        msgs: '<h1> hello </h1>',
    }
}

v-bind 用來響應地更新 HTML 屬性 縮寫 '：'

<!-- <h1 v-bind:id="ids">{{ msg }}</h1> -->
<h1 :id="ids">{{ msg }}</h1>

name: 'Practice',
data () {
    return {
        ids: 'h1_id'
    }
}

能夠直接使用JavaScript表達式

{{ 4 + 1 }}
{{ 5>6 ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

v-on 綁定事件 縮寫 '@'

<button v-on:click="clickthing">點擊</button>
<button @[eventName]="clickthing">點擊</button>

data () {
    return {
        eventName:'click'
    }
},
methods: {
    clickthing() {
        alert("hello");
    },
}

v-model 數據雙向綁定 

<p>{{ msg }}</p>
<input type="text" v-model="msg">

data () {
    return {
        msg: '',
    }
},

v-if v-else-if v-else 條件語句

<ul>
    <li v-if="type === 'A'">A</li>
    <li v-else-if="type === 'B'">B</li>
    <li v-else-if="type === 'C'">C</li>
    <li v-else>Not A/B/C</li>
</ul>

data () {
    return {
        type: 'C',
    }
},

v-show 根據條件顯示或隱藏元素

<h1 v-show="ok">v-show</h1>

data () {
    return {
        ok: false,
    }
},

v-for 循環指令

<ol>
    <li v-for="site in sites" :key="site">
        {{ site.name }}
    </li>
</ol>

data () {
    return {
        sites:[{name:'小趙'},{name:'小李'},{name:'小王'}]
    }
},