本篇文章幫大家學(xué)習(xí)VueJS模板，包含了VueJS模板使用方法、操作技巧、實(shí)例演示和注意事項(xiàng)，有一定的學(xué)習(xí)價(jià)值，大家可以用來參考。

在前面的章節(jié)中我們已經(jīng)學(xué)到了如何在屏幕上以文本內(nèi)容的形式獲得輸出。 在本章中將學(xué)習(xí)如何在屏幕上以HTML模板的形式獲取輸出。

要理解這一點(diǎn)，讓我們先看看一個(gè)例子，并在瀏覽器中看到輸出。創(chuàng)建一個(gè)文件：template.html -

VueJs模板

名字 : {{name}}

城市 : {{city}}

{{htmlcontent}}

再創(chuàng)建另一個(gè)文件：vue_template.js -

var vm = new Vue({

el: '#vue_det',

data: {

name : "Maxsu",

city : "?？?#34;,

htmlcontent : "

Vue Js Template

"

}

})

現(xiàn)在，假設(shè)要在頁面上顯示html內(nèi)容。 如果使用了插值，也就是使用雙括號(hào)，在瀏覽器中得到的結(jié)果如下所示 -

如果看到html內(nèi)容的顯示方式與在htmlcontent中給出的方法相同，那么這不是我們想要的，我們希望它在瀏覽器中顯示在正確的HTML內(nèi)容中。

為此，可以通過使用v-html指令。 當(dāng)將v-html指令分配給html元素時(shí)，VueJS知道它必須以HTML內(nèi)容的形式輸出?，F(xiàn)在通過template.html文件中添加v-html指令并查看之上面顯示的結(jié)果有什么不同。

VueJs模板

名字 : {{name}}

城市 : {{city}}

現(xiàn)在，不需要使用雙括號(hào)來顯示HTML內(nèi)容，而是使用了v-html ="html content"，其中html內(nèi)容在vue_template.js文件中定義如下 -

var vm = new Vue({

el: '#vue_det',

data: {

name : "Maxsu",

city : "?？?#34;,

htmlcontent : "

Vue Js Template

"

}

})

再次使用瀏覽器打開template.html，輸出效果如下所示 -

如果查看瀏覽器，我們會(huì)看到內(nèi)容的添加方式與在.js文件中定義的變量htmlcontent相同："

Vue Js Template

"。

下面來看看瀏覽器中的inspect元素，如下圖所示 -

我們已經(jīng)看到如何將HTML模板添加到dom。 現(xiàn)在來看看如何為現(xiàn)有的HTML元素添加屬性。考慮一下，在HTML文件中有一個(gè)圖像標(biāo)簽，并為src屬性分配一個(gè)值，它是Vue的一部分。

示例一

參考以下代碼(template-example1.html) -

VueJs模板

名字 : {{name}}

城市 : {{city}}

看看上面的img標(biāo)簽，src屬性的值是空的。所以我們需要從vuejs中添加src屬性的值。 如何可以做到這一點(diǎn)？在template-example1.js文件中的數(shù)據(jù)對(duì)象中存儲(chǔ)imgsrc，如下所示 —

var vm = new Vue({

el: '#vue_det',

data: {

name : "Maxsu",

city : "?？?#34;,

htmlcontent : "

Vue Js Template

",

imgsrc : "images/mydog.jpg"

}

})

如果按如下所示分配src屬性的值，瀏覽器中的輸出將如下圖所示 -

但是這樣做并不能顯示圖像。要將任何屬性分配給HTML標(biāo)簽，需要使用v-bind指令。 用v-bind指令將src添加到img標(biāo)簽中。這是在template-example1.html文件中分配的。參考以下代碼 -

VueJs模板

名字 : {{name}}

城市 : {{city}}

需要在src屬性前添加v-bind:src = "imgsrc"和src的變量名稱。以下是瀏覽器中的輸出結(jié)果 -

總結(jié)

以上是生活随笔為你收集整理的vue模板html,VueJS模板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。