字符串模板~ES6字符串拼接模板（七）

最新推荐文章于 2024-07-20 18:19:31 发布

YATBOTB-lHQ

最新推荐文章于 2024-07-20 18:19:31 发布

阅读量1.9k

点赞数

分类专栏： Vue.js

本文链接：https://blog.youkuaiyun.com/qq_40415721/article/details/81841797

版权

Vue.js 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在Vue.js中使用ES6模板字符串定义组件模板，并通过一个简单的例子演示了如何将变量嵌入到HTML结构中，同时展示了如何利用Vue的数据绑定特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script src="vue.js"></script>

<div id="demo"></div>

//单独把结构写在字符串str里:var str='<div>Hello,Vue</div>'; 
//以上的方式会有个弊端，就是如果换行，后台就会报错。

//如果存在变量Vue,写法如下：
//var str = '<div>Hello,"' + Vue + '"</div>';

//使用ES6字符串拼接模板方法 ` ` 的形式：
//如果存在变量在str里面呢？则使用双大括号文本插值的形式{{}}包住变量；
var str = `<h2>Hello,{{Vue}},
              <p>How are you</p>
            </h2>
          `;

console.log(str); 

//那怎么把上面的str放进结构里呢?

//在Vue实例里再加一个属性是template,后接str；如下：
var vm = new Vue({
    el:'#demo',
    data:{
        Vue:'jack'
    },
    template:str
})

注意：字符串模板template 会替换原始的html结构的；