ES6字符串模板
这里做个简单的拓展,之前做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字符串模板的更多相关文章
- es6字符串模板总结
我们平时用原生js插入标签或者用node.js写数据库语言时候,经常需要大量的字符串进行转义,很容易出错,有了es6的字符串模板,就再也不用担心会出错了 1.模板中的变量写在${}中,${}中的值可以 ...
- es6 字符串模板拼接和传统字符串拼接
字符串拼接是在日常开发中必不可少的一个环节. 注意:字符串可以用单引号'',或者""双引号,出于方便大家理解,文章以下内容统一使用单引号''! 如果只是一个字符串和一个变量拼接,使 ...
- 只为粗暴看一下ES6的字符串模板的性能
网上查找"ES6 字符串模板 +性能"5分钟无果遂写了一个暴力测试. 测试对象: +=方式,字符串累加计算方式 +s1+s2...+sn方式,即传统连加拼接字符串方式 s.push ...
- 前端小白-----ES6之字符串模板
前言:只要坚持就会胜利--Coldfront-小白菜 既是总结也是一种分享 分享内容:ES6 字符串模板 案例1:var Musics=[{music:"六月的雨",singer: ...
- ES6中字符串模板的使用
反撇号(键盘上Tab键上面那个)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符代替普通字符串的引号 ‘ 或 ” 外,它们 ...
- es6 入坑笔记(一)---let,const,解构,字符串模板
let 全面取代var 大概相似于C++的定义,一个变量必须得先定义后使用,没有预编译 注意let的作用域,一个{}就是一个作用域,上述规则须在一个作用于内 坑:for(let i =0;i < ...
- 【微信小程序+ES6新特性应用】字符串模板:美元符号$+大括号{}变量的写法
1.字符串模板简介 ES6新特性中的字符串模板允许使用英文字符抑音符号`(提示:这里我们不能将其理解为单引号)来创建字符串,并且在该字符串中可以包含都[美元符号+大括号]包裹的变量 格式:consol ...
- ES6, Angular,React和ABAP中的String Template(字符串模板)
String Template(字符串模板)在很多编程语言和框架中都支持,是一个很有用的特性.本文将Jerry工作中使用到的String Template的特性做一个总结. ES6 阮一峰老师有一个专 ...
- ES6入门四:对象字面量扩展与字符串模板字面量
简洁属性与简洁方法 计算属性名与[[prototype]] super对象(暂时保留解析) 模板字面量(模板字符串) 一.简洁属性与简洁方法 ES6中为了不断优化代码,减低代码的耦合度在语法上下了很大 ...
随机推荐
- EJB之JPA
在前一篇文章中大概了解了EJB是什么?那么接下来就进一步介绍一下它与JPA有什么样的关系?及什么是JPA?JPA怎样用? 一.是什么? 第一次听说JPA是在EJB视屏中,所以一直感觉他们有不解的渊源. ...
- HDU 5000 2014 ACM/ICPC Asia Regional Anshan Online DP
Clone Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/65536K (Java/Other) Total Submiss ...
- [RK3288][Android6.0] Display驱动初始化流程小结【转】
本文转载自:http://blog.csdn.net/kris_fei/article/details/52584903 Platform: RK3288OS: Android 6.0Kernel: ...
- 美国诚实签经验——中英文行程单、往返机票、用英语面试的申请者通过率>用中文面试的申请者的通过率、一直保持着微笑,看上去很自信,也很诚恳、户口簿带上最好
在排队等待时据我的观察,用英语面试的申请者通过率>用中文面试的申请者的通过率.一家人申请通过率>单个人通过率:商务签证通过率>旅游签证通过率 一. 面签材料 1. 必备材 ...
- [疑问] C# 多线程程序,如果在并行程序块中开空间会远远慢于将空间开在并行块之外
// int[,] label = new int[m, n]; Parallel.For(, thread_num, (n) => { ]; i++) { int[] tmp = new in ...
- 利用Theme自定义Activity进入退出动画
有没有觉得Activity的默认动画太快了或者太难看了.. 我原来使用Activity.overridePendingTransition来自定义Activity的进入动画,却发现没法定义退出的动画. ...
- [POI2011]LIZ-Lollipop
https://www.zybuluo.com/ysner/note/1303462 题面 给一个只有\(1\)和\(2\)的序列,每次询问有没有一个子串的和为\(x\). \(n\leq10^6\) ...
- Java 泛型 一
泛型在Java中有很重要的地位,网上很多文章罗列各种理论,不便于理解,本篇将立足于代码介绍.总结了关于泛型的知识. 先看下面的代码: List list = new ArrayList(); list ...
- ubuntu16.04 查看系统可用内存
free -m 查看内存情况 (单位MB) mem 行显示了从系统角度看来内存使用的情况, total是系统可用的内存大小, 数量上等于系统物理内存减去内核保留的内存. buffers和cach ...
- P3207 [HNOI2010]物品调度
传送门 完了题目看错了--还以为所有的\(x,y\)都要一样--结果题解都没看懂-- 先考虑如果已经求出了所有的\(pos\)要怎么办,那么我们可以把\(0\)也看做是一个箱子,然后最后每个箱子都在一 ...