溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章運用簡單易懂的例子給大家介紹vue中template的使用方法有哪些，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
第一種(字符串模板寫法):
直接寫在vue構造器里,這種寫法比較直觀,適用于html代碼不多的場景,但是如果模板里html代碼太多,不便于維護,不建議這么寫.
<!DOCTYPE html> <html> <!-- WARNING! Make sure that you match all Quasar related tags to the same version! (Below it's "@1.7.4") --> <head> <!-- <link href="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css"> --> <link href="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar@1.7.4.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css"> </head> <body> <div id="q-app"> </div> <!-- Add the following at the end of your body tag --> <!-- <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.umd.min.js"></script> --> <script src="https://www.mobibrw.com/wp-content/uploads/2020/06/vue@2.0.0.js"></script> <script src="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar.umd@1.7.4.js"></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>
第二種:
直接寫在template標簽里,這種寫法跟寫html很像。
<!DOCTYPE html>
<html>
<!--
WARNING! Make sure that you match all Quasar related
tags to the same version! (Below it's "@1.7.4")
-->
<head>
<!--
<link href="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
-->
<link href="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar@1.7.4.css" 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>
<!-- Add the following at the end of your body tag -->
<!--
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.umd.min.js"></script>
-->
<script src="https://www.mobibrw.com/wp-content/uploads/2020/06/vue@2.0.0.js"></script>
<script src="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar.umd@1.7.4.js"></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>第三種:
寫在script標簽里,這種寫法官方推薦,vue官方推薦script中type屬性加上"x-template",即:
<!DOCTYPE html>
<html>
<!--
WARNING! Make sure that you match all Quasar related
tags to the same version! (Below it's "@1.7.4")
-->
<head>
<!--
<link href="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
-->
<link href="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar@1.7.4.css" 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>
<!-- Add the following at the end of your body tag -->
<!--
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.umd.min.js"></script>
-->
<script src="https://www.mobibrw.com/wp-content/uploads/2020/06/vue@2.0.0.js"></script>
<script src="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar.umd@1.7.4.js"></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的使用方法有哪些就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
