“VUE 本地应用”的版本间的差异
跳到导航
跳到搜索
Jihongchang(讨论 | 贡献) |
Jihongchang(讨论 | 贡献) |
||
| 第10行: | 第10行: | ||
<div id="app"> | <div id="app"> | ||
<h2 v-text="message"></h2> | <h2 v-text="message"></h2> | ||
| + | </div> | ||
| + | |||
| + | var app = new Vue({ | ||
| + | el:"#app", | ||
| + | data:{ | ||
| + | message:"hello world" | ||
| + | } | ||
| + | }) | ||
| + | </syntaxhighlight> | ||
| + | 上面的示例会替换 h2 标签内的全部内容 | ||
| + | |||
| + | 有时候我们希望只对标签内的部分文本内容进行替换:<syntaxhighlight lang="html"> | ||
| + | <div id="app"> | ||
<h2>深圳{{ message }}</h2> | <h2>深圳{{ message }}</h2> | ||
</div> | </div> | ||
| 第19行: | 第32行: | ||
} | } | ||
}) | }) | ||
| − | </syntaxhighlight> | + | </syntaxhighlight>上面示例中这种写法就是官方推荐的 <u>插值表达式</u>,可以只对标签内部的部分文本内容进行替换。 |
2023年6月7日 (三) 08:06的版本
介绍
1.内容绑定,事件绑定
2.显示切换,属性绑定
3.列表循环,表单元素绑定
v-text
设置标签的文本值(textContent)
<div id="app">
<h2 v-text="message"></h2>
</div>
var app = new Vue({
el:"#app",
data:{
message:"hello world"
}
})
上面的示例会替换 h2 标签内的全部内容
有时候我们希望只对标签内的部分文本内容进行替换:
<div id="app">
<h2>深圳{{ message }}</h2>
</div>
var app = new Vue({
el:"#app",
data:{
message:"hello world"
}
})
上面示例中这种写法就是官方推荐的 插值表达式,可以只对标签内部的部分文本内容进行替换。