App下載
3. 模板語法1
Vue2入門課程 / 3. 模板語法1
手機也能上課
App下載
1/8

數據綁定

文本

數據綁定最常見的形式就是使用“Mustache”語法 {{}}(雙大括號) 的文本插值:

<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", 頁面上會自動同步成 “hello nier”。

你也可以點擊嘗試一下, 自己查看效果


v-once 指令

能執(zhí)行一次性地插值,當數據改變時,插值處的內容不會更新。

<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 經驗 +10積分
解析
提示
參考答案
+10 經驗 +10積分
視頻播放結束,是否學習下一節(jié)?