文章详情页

vue中template的三种写法示例

【字号：大中小】日期：2022-11-15 17:34:16浏览：29作者：猪猪

第一种(字符串模板写法):

直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写.

<!DOCTYPE html><html>  <head>  <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 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>  <head>  <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>   <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>  <head>  <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>   <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的三种写法示例的详细内容，更多关于vue template的资料请关注好吧啦网其它相关文章！

Vue

上一条：vue+springboot+element+vue-resource实现文件上传教程下一条：Vue使用v-viewer实现图片预览

相关文章：

1. django前端页面下拉选择框默认值设置方式2. django有哪些好处和优点3. 在Django中使用MQTT的方法4. Django Auth用户认证组件实现代码5. 在django中查询获取数据,get, filter,all(),values()操作6. js实现简单抽奖功能7. python图像处理基本操作总结（PIL库、Matplotlib及Numpy）8. python实现图像处理之PiL依赖库的案例应用详解9. 基于ASP实现QQ在线查询功能10. PHP实现PDF转图片的方法详解

排行榜

					
					js实现简单抽奖功能
在Django中使用MQTT的方法
Django Auth用户认证组件实现代码
django有哪些好处和优点
django前端页面下拉选择框默认值设置方式
在django中查询获取数据,get, filter,all(),values()操作
PHP随机生成中文段落示例【测试网站内容时使用】
python线性插值解析
Python Flask微信小程序登录流程及登录api实现代码
Python requests.post方法中data与json参数区别详解
Python实现手势识别
				

热门标签