v-text
1
2
3
|
<div id="app">
<p v-text="apple"></p>
</div>
|
1
2
3
4
5
6
7
|
Vue.createApp({
data(){
return{
apple: "蘋果",
}
}
}).mount("#app");
|
{{}}(Mustache)
1
2
3
4
|
<div id="app">
<p>{{ apple }}</p>
<p>{{ 1 + 1 }}</p>
</div>
|
1
2
3
4
5
6
7
|
Vue.createApp({
data(){
return{
apple: "蘋果",
}
}
}).mount("#app");
|
顯示結果：
1
2
3
4
|
<div id="app">
<p>蘋果</p>
<p>2</p>
</div>
|
{{}} 進階用法
1
2
3
|
<div id="app">
<p>{{ `${apple}比${banana}還好吃` }}</p>
</div>
|
1
2
3
4
5
6
7
8
|
Vue.createApp({
data(){
return{
apple: "蘋果",
banana: "香蕉"
}
}
}).mount("#app");
|
{{}} + methods方法
1
2
3
|
<div id="app">
<p>{{ sayName("香蕉") }}</p>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
|
Vue.createApp({
data(){
return{
apple: "蘋果",
}
},
methods:{
sayName(name){
return `${this.apple}比${name}還好吃`
}
}
}).mount("#app");
|
v-html
1
2
3
|
<div id="app">
<div v-html="apple"></div>
</div>
|
1
2
3
4
5
6
7
|
Vue.createApp({
data(){
return{
apple: "<p>蘋果</p>",
}
}
}).mount("#app");
|
跟v-text和{{}}結果相同，但會多帶一個div標籤
v-once + v-model 資料只渲染一次，但後續不被更動
1
2
3
4
|
<div id="app">
<input type="text" v-model="apple">
<p v-once>{{ apple }}</p>
</div>
|
1
2
3
4
5
6
7
|
Vue.createApp({
data(){
return{
apple: "蘋果",
}
}
}).mount("#app");
|
會呈現"蘋果"，但是不會被v-model改動
v-pre + {{}} 括弧內的文字不會被編譯，直接呈現
1
2
3
|
<div id="app">
<p v-pre>{{ apple }}</p>
</div>
|
1
2
3
4
5
6
7
|
Vue.createApp({
data(){
return{
apple: "蘋果",
}
}
}).mount("#app");
|
{{}}的進階用法
其他相關