文章詳情頁(yè)

vue中template的三種寫(xiě)法示例

瀏覽：69日期：2022-11-15 17:34:16

第一種(字符串模板寫(xiě)法):

直接寫(xiě)在vue構(gòu)造器里,這種寫(xiě)法比較直觀,適用于html代碼不多的場(chǎng)景,但是如果模板里html代碼太多,不便于維護(hù),不建議這么寫(xiě).

<!DOCTYPE html><html>  <head>  <link rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='stylesheet' type='text/css'> </head> <body> <div id='q-app'> </div>   <script src='https://www.mobibrw.com/wp-content/uploads/2020/06/[email protected]'></script> <script src='https://www.mobibrw.com/wp-content/uploads/2020/06/[email protected]'></script> <script> /* Example kicking off the UI. Obviously, adapt this to your specific needs. Assumes you have a <div id='q-app'></div> in your <body> above */ new Vue({ el: ’#q-app’, data: function () { return { version: Quasar.version } }, template: `<div class='q-ma-md'> Running Quasar v{{ version }}</div>` // ...etc }) </script> </body></html>

第二種:

直接寫(xiě)在template標(biāo)簽里,這種寫(xiě)法跟寫(xiě)html很像。

<!DOCTYPE html><html>  <head>  <link rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='stylesheet' type='text/css'> </head> <body> <div id='q-app'> <template id=’template1’> <div class='q-ma-md'> Running Quasar v{{ version }} </div> </template> </div>   <script src='https://www.mobibrw.com/wp-content/uploads/2020/06/[email protected]'></script> <script src='https://www.mobibrw.com/wp-content/uploads/2020/06/[email protected]'></script> <script> /* Example kicking off the UI. Obviously, adapt this to your specific needs. Assumes you have a <div id='q-app'></div> in your <body> above */ new Vue({ el: ’#q-app’, data: function () { return { version: Quasar.version } }, template: ’#template1’ // ...etc }) </script> </body></html>

第三種:

寫(xiě)在script標(biāo)簽里,這種寫(xiě)法官方推薦,vue官方推薦script中type屬性加上'x-template',即:

<!DOCTYPE html><html>  <head>  <link rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='stylesheet' type='text/css'> </head> <body> <div id='q-app'></div><script type='x-template' id='template1'> <div class='q-ma-md'> Running Quasar v{{ version }} </div> </script>   <script src='https://www.mobibrw.com/wp-content/uploads/2020/06/[email protected]'></script> <script src='https://www.mobibrw.com/wp-content/uploads/2020/06/[email protected]'></script> <script> /* Example kicking off the UI. Obviously, adapt this to your specific needs. Assumes you have a <div id='q-app'></div> in your <body> above */ new Vue({ el: ’#q-app’, data: function () { return { version: Quasar.version } }, template: ’#template1’ // ...etc }) </script> </body></html>

以上就是vue中template的三種寫(xiě)法示例的詳細(xì)內(nèi)容，更多關(guān)于vue template的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！

Vue

上一條：vue+springboot+element+vue-resource實(shí)現(xiàn)文件上傳教程下一條：Vue使用v-viewer實(shí)現(xiàn)圖片預(yù)覽

相關(guān)文章：

1. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向2. .NET SkiaSharp 生成二維碼驗(yàn)證碼及指定區(qū)域截取方法實(shí)現(xiàn)3. jsp網(wǎng)頁(yè)實(shí)現(xiàn)貪吃蛇小游戲4. CentOS郵件服務(wù)器搭建系列—— POP / IMAP 服務(wù)器的構(gòu)建（ Dovecot ）5. Java中equals()知識(shí)點(diǎn)總結(jié)6. css代碼優(yōu)化的12個(gè)技巧7. ASP中if語(yǔ)句、select 、while循環(huán)的使用方法8. MyBatis JdbcType 與Oracle、MySql數(shù)據(jù)類(lèi)型對(duì)應(yīng)關(guān)系說(shuō)明9. 小技巧處理div內(nèi)容溢出10. 將properties文件的配置設(shè)置為整個(gè)Web應(yīng)用的全局變量實(shí)現(xiàn)方法

排行榜

					
					django創(chuàng)建css文件夾的具體方法
MyBatis JdbcType 與Oracle、MySql數(shù)據(jù)類(lèi)型對(duì)應(yīng)關(guān)系說(shuō)明
idea自定義快捷鍵的方法步驟
Java中equals()知識(shí)點(diǎn)總結(jié)
IntelliJ IDEA設(shè)置背景圖片的方法步驟
將properties文件的配置設(shè)置為整個(gè)Web應(yīng)用的全局變量實(shí)現(xiàn)方法
ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向
css代碼優(yōu)化的12個(gè)技巧
ASP中if語(yǔ)句、select 、while循環(huán)的使用方法
.NET SkiaSharp 生成二維碼驗(yàn)證碼及指定區(qū)域截取方法實(shí)現(xiàn)
小技巧處理div內(nèi)容溢出
				

亚洲精品久久久中文字幕-亚洲精品久久片久久-亚洲精品久久青草-亚洲精品久久婷婷爱久久婷婷-亚洲精品久久午夜香蕉

vue中template的三種寫(xiě)法示例