这里做个简单的拓展,之前做vue组件时,经常用到拼接字符串,换行时用到\,既费时又麻烦。这里介绍个ES6字符串模板方法

旧版拼接(各种换行拼接)

        Vue.component('obj-prop',{
props:['blog'],
template:'\
<div class="obj_prop_div"><h2>{{blog.name}}</h2>\
<p>内容为:{{blog.content}}</p>\
<p>作者为:{{blog.author}}</p>\
</div>\
'
});

新版方法(里面直接换行,不用拼接)

        Vue.component('obj-prop',{
props:['blog'],
template:`
<div class="obj_prop_div"><h2>{{blog.name}}</h2>
<p>内容为:{{blog.content}}</p>
<p>作者为:{{blog.author}}</p>
</div>
`
});

输入`方式:CapsLk + ~,即可输出`

.

ES6字符串模板的更多相关文章

  1. es6字符串模板总结

    我们平时用原生js插入标签或者用node.js写数据库语言时候,经常需要大量的字符串进行转义,很容易出错,有了es6的字符串模板,就再也不用担心会出错了 1.模板中的变量写在${}中,${}中的值可以 ...

  2. es6 字符串模板拼接和传统字符串拼接

    字符串拼接是在日常开发中必不可少的一个环节. 注意:字符串可以用单引号'',或者""双引号,出于方便大家理解,文章以下内容统一使用单引号''! 如果只是一个字符串和一个变量拼接,使 ...

  3. 只为粗暴看一下ES6的字符串模板的性能

    网上查找"ES6 字符串模板 +性能"5分钟无果遂写了一个暴力测试. 测试对象: +=方式,字符串累加计算方式 +s1+s2...+sn方式,即传统连加拼接字符串方式 s.push ...

  4. 前端小白-----ES6之字符串模板

    前言:只要坚持就会胜利--Coldfront-小白菜 既是总结也是一种分享 分享内容:ES6 字符串模板 案例1:var Musics=[{music:"六月的雨",singer: ...

  5. ES6中字符串模板的使用

    反撇号(键盘上Tab键上面那个)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符代替普通字符串的引号 ‘ 或 ” 外,它们 ...

  6. es6 入坑笔记(一)---let,const,解构,字符串模板

    let  全面取代var 大概相似于C++的定义,一个变量必须得先定义后使用,没有预编译 注意let的作用域,一个{}就是一个作用域,上述规则须在一个作用于内 坑:for(let i =0;i < ...

  7. 【微信小程序+ES6新特性应用】字符串模板:美元符号$+大括号{}变量的写法

    1.字符串模板简介 ES6新特性中的字符串模板允许使用英文字符抑音符号`(提示:这里我们不能将其理解为单引号)来创建字符串,并且在该字符串中可以包含都[美元符号+大括号]包裹的变量 格式:consol ...

  8. ES6, Angular,React和ABAP中的String Template(字符串模板)

    String Template(字符串模板)在很多编程语言和框架中都支持,是一个很有用的特性.本文将Jerry工作中使用到的String Template的特性做一个总结. ES6 阮一峰老师有一个专 ...

  9. ES6入门四:对象字面量扩展与字符串模板字面量

    简洁属性与简洁方法 计算属性名与[[prototype]] super对象(暂时保留解析) 模板字面量(模板字符串) 一.简洁属性与简洁方法 ES6中为了不断优化代码,减低代码的耦合度在语法上下了很大 ...

随机推荐

  1. 【bzoj4538】[Hnoi2016]网络

    我们考虑树剖,线段树上维护一个堆,保存不经过该段区间的路径的权值. 对于一条路径我们将对于线段树中的区间提取出来,在对于线段树中进行修改.也就是在堆中插入或删除. 对于一次询问,只要找到包含该点的线段 ...

  2. java Bean及其使用

    1 getter/setter方法 java例子: public class student { private String name; public String getName() { retu ...

  3. 大文本 通过 hadoop spark map reduce 获取 特征列 的 属性值 计算速度

    大文本 通过 hadoop spark map reduce   获取 特征列  的 属性值  计算速度

  4. document.body.className = document.body.className.replace("siteorigin-panels-before-js","");

    document.body.className = document.body.className.replace("siteorigin-panels-before-js",&q ...

  5. 20170623_oracle_优化与体系结构

    一般优化技巧 建议不用"*"代替所有列名 删除所有数据用TRUNCATE代替DELETE 用NOT EXISTS 代替NOT IN 用EXISTS代替IN 用EXISTS代替DIS ...

  6. 60分钟Python快速学习

    之前和同事谈到Python,每次下班后跑步都是在听他说,例如Python属于“胶水语言啦”,属于“解释型语言啦!”,是“面向对象的语言啦!”,另外没有数据类型,逻辑全靠空格缩进表示等. 今天自己用了6 ...

  7. P3469 [POI2008]BLO-Blockade(Tarjan 割点)

    P3469 [POI2008]BLO-Blockade 题意翻译 在Byteotia有n个城镇. 一些城镇之间由无向边连接. 在城镇外没有十字路口,尽管可能有桥,隧道或者高架公路(反正不考虑这些).每 ...

  8. bzoj1528 sam-Toy Cars(贪心,优先队列)

    「BZOJ1528」[POI2005] sam – Toy Cars Description Jasio 是一个三岁的小男孩,他最喜欢玩玩具了,他有n 个不同的玩具,它们都被放在了很高的架子上所以Ja ...

  9. [Qt Creator 快速入门] 第8章 界面外观

    一个完善的应用程序不仅应该有实用的功能,还要有一个漂亮的外观,这样才能使应用程序更加友好,更加吸引用户.作为一个跨平台的UI开发框架,Qt提供了强大而灵活的界面外观设计机制.这一章将学习在Qt中设计应 ...

  10. linux学习之路3 文件系统结构

    一些有用的定义: linux文件系统为一个倒转的单根树状结构 文件系统的根为"/" linux系统文件严格区分大小写,而windows系统不区分大小写 路径使用"/&qu ...