3. 模板語(yǔ)法1
Vue2入門(mén)課程 / 3. 模板語(yǔ)法1
手機(jī)也能上課
App下載
1/8

數(shù)據(jù)綁定

文本

數(shù)據(jù)綁定最常見(jiàn)的形式就是使用“Mustache”語(yǔ)法 {{}}(雙大括號(hào)) 的文本插值:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<span id="app">Message: {{ msg }}</span> <script> var vm = new Vue({ el:'#app', data:{             msg: "hello w3cschool" } }); setTimeout(()=>{ vm.msg = "hello nier"; }, 1000); </script>


如上所示我們給 msg 賦值 "hello w3cschool", 一秒后修改msg的值為"hello nier", 頁(yè)面上會(huì)自動(dòng)同步成 “hello nier”。

你也可以點(diǎn)擊嘗試一下, 自己查看效果


v-once 指令

能執(zhí)行一次性地插值,當(dāng)數(shù)據(jù)改變時(shí),插值處的內(nèi)容不會(huì)更新。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<span id="app" v-once>Message: {{ msg }}</span> <script> var vm = new Vue({ el:'#app', data:{             msg: "hello w3cschool" } }); setTimeout(()=>{ vm.msg = "hello nier"; }, 1000); </script>



+10 經(jīng)驗(yàn) +10積分
解析
提示
參考答案
+10 經(jīng)驗(yàn) +10積分
視頻播放結(jié)束,是否學(xué)習(xí)下一節(jié)?