[Day11] 資料綁定細節

第 12 屆 iThome 鐵人賽

DAY 11

Modern Web

少年學Vue，如隙中窺月系列第 11 篇

12th鐵人賽

Leo

2020-09-25 21:16:22

862 瀏覽

分享至

單向綁定 (v-once)

一般來說，如果我們使用 v-text 來綁定資料與畫面，那通常會是雙面綁定，資料和畫面是交互影響的，假設我們只想讓畫面只渲染一次資料後就不再變動，我們可以使用 v-once 語法，如下面程式，當 input 輸入畫面資料 text 改變時，有加 v-once 的 div 區塊不會跟著改變。

<body>
    <div id=app>
        <input type="text" v-model="text">
        <div v-text='text' v-once></div>
        <div v-text='text' ></div>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            text:'hello'
        }
    })
</script>

表達式 (Expression)

js 裡面有很多常見的表達式子，當我們把它寫進 Vue {{}} 中，它會自動幫我們執行並渲染。補充一下，我們除了聽過表達式 (Expression) 之外也聽過陳述式 (Statement)，兩者差異在於，表達式子會回傳值一個值，像是判斷兩個數字的大小，它會回傳給你 true 或 false，兩個數字相加它會回傳給你相加後數值 (好像你和別人表白，他會回應要還是不要)，而陳述式 (Statement) 就只是執行指令沒有回傳值，比如變數宣告或者 while 迴圈等。

<body>
    <div id=app>
        {{number1+number2}}
        {{text1+text2}}
        {{number1+number2}}
        {{text1.split('').reverse().join('')}}
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            number1:1,
            number2:2,
            text1:'Hello',
            text2:'Vue'
        }
    })
</script>