File tree Expand file tree Collapse file tree 1 file changed +6
-4
lines changed Expand file tree Collapse file tree 1 file changed +6
-4
lines changed Original file line number Diff line number Diff line change @@ -53,14 +53,16 @@ var app = new Vue({
53
53
54
54
``` html
55
55
<div id =" app-2" >
56
- <span v-bind:id =" id" >Inspect me</span >
56
+ <span v-bind:title =" message" >
57
+ Hover your mouse over me for a few seconds to see my dynamically bound title!
58
+ </span >
57
59
</div >
58
60
```
59
61
``` js
60
62
var app2 = new Vue ({
61
63
el: ' #app-2' ,
62
64
data: {
63
- id : ' inspect-me '
65
+ message : ' You loaded this page on ' + new Date ()
64
66
}
65
67
})
66
68
```
@@ -80,9 +82,9 @@ var app2 = new Vue({
80
82
</script >
81
83
{% endraw %}
82
84
83
- 这里我们遇到新东西 。你看到的 ` v-bind ` 特性被称为 ** 指令** 。指令带有前缀 ` v- ` ,以指示它们是 Vue.js 提供的特殊属性。并且如你所想象的 ,它们会在渲染过的 DOM 上应用特殊的响应式行为。这个指令的简单含义是说:将该元素的 id 属性绑定到 Vue 实例的 id 属性上 。
85
+ 这里我们遇到点新东西 。你看到的 ` v-bind ` 属性被称为 ** 指令** 。指令带有前缀 ` v- ` ,以表示它们是 Vue.js 提供的特殊属性。可能你已经猜到了 ,它们会在渲染过的 DOM 上应用特殊的响应式行为。这个指令的简单含义是说:将这个元素节点的 ` title ` 属性和 Vue 实例的 ` message ` 属性绑定到一起 。
84
86
85
- 用浏览器的开发者工具去监测以上元素 - 你会发现这个元素的 id 为 ` inspect-me ` 。是的,如果你在控制台里更改 ` app2.id ` ,那么该元素的 id 也会随之更新 。
87
+ 你再次打开浏览器的控制台输入 ` app2.message = 'some new message' ` ,你就会再一次看到这个绑定了 ` title ` 属性的HTML已经进行了更新 。
86
88
87
89
## 条件与循环
88
90
You can’t perform that action at this time.
0 commit comments