VUE檢視常規操作

檢視常規操作

• v-text：文字變數

<p v-text='msg'></p>
<p>{{ msg }}</p>

• v-once：一次性文字賦值

<p v-once>{{ msg }}</p>

• v-html：html文字變數

<p v-html='msg'></p>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '<b>文字</b>'
        }
    })
</script>

• v-bind：屬性繫結

<div id="app">
    <img v-bind:src='imgSrc' />
    <!-- 簡寫 -->
    <img :src='imgSrc' />
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            imgSrc: 'https://www.baidu.com/favicon.ico'
        }
    })
</script>

• v-model：雙向資料繫結

<div id="app">
    <input type="text" v-model='msg'>
    <p>{{ msg }}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: ''
        }
    })
</script>

• v-cloak：避免頁面載入閃爍

<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app" v-cloak>
    
</div>

• 檢視自身運算

<div id="app" v-cloak>
    <p>{{ 1 + 1 }}</p>
    <p>{{ [1, 2, 3].join('@') }}</p>
</div>