App下载
模板语法1
Vue 2.x 微课 / 模板语法1
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 指令

能执行一次性地插值,当数据改变时,插值处的内容不会更新。

<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积分
参考答案
视频播放结束,是否学习下一节?