“VUE 本地应用”的版本间的差异
跳到导航
跳到搜索
Jihongchang(讨论 | 贡献) |
Jihongchang(讨论 | 贡献) (→v-text) |
||
第33行: | 第33行: | ||
}) | }) | ||
</syntaxhighlight>上面示例中这种写法就是官方推荐的 <u>插值表达式</u>,可以只对标签内部的部分文本内容进行替换。 | </syntaxhighlight>上面示例中这种写法就是官方推荐的 <u>插值表达式</u>,可以只对标签内部的部分文本内容进行替换。 | ||
+ | |||
+ | 字符串拼接<syntaxhighlight lang="html"> | ||
+ | <div id="app"> | ||
+ | <h2 v-text="message+'!'"></h2> | ||
+ | <h2>深圳{{ message + "!" }}</h2> | ||
+ | </div> | ||
+ | |||
+ | var app = new Vue({ | ||
+ | el:"#app", | ||
+ | data:{ | ||
+ | message:"hello world" | ||
+ | } | ||
+ | }) | ||
+ | </syntaxhighlight> |
2023年6月7日 (三) 08:15的版本
介绍
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"
}
})
上面示例中这种写法就是官方推荐的 插值表达式,可以只对标签内部的部分文本内容进行替换。 字符串拼接
<div id="app">
<h2 v-text="message+'!'"></h2>
<h2>深圳{{ message + "!" }}</h2>
</div>
var app = new Vue({
el:"#app",
data:{
message:"hello world"
}
})