vue中template的三种写法示例

(编辑：jimmy 日期: 2024/11/14 浏览：2)

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

直接写在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="/UploadFiles/2021-04-02/vue.min.js">


第二种:


直接写在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="/UploadFiles/2021-04-02/vue.min.js">


第三种:


写在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="/UploadFiles/2021-04-02/vue.min.js">


以上就是vue中template的三种写法示例的详细内容，更多关于vue template的资料请关注其它相关文章！



        

            
上一篇：node.js如何根据URL返回指定的图片详解

            
下一篇：React实现评论的添加和删除
一句话新闻
高通与谷歌联手！首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布，推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。