误打误撞的模板字符串

前情回顾：之所以用到模板字符串呢，是在这样一个场景中用到一个类似微信发朋友圈时选择图片时的一个场景，如图所示

当时脑抽是怎么想的呢，其实也很简单，当时想的就是新建div嘛，然后append到父容器就ok啦，那问题就在于拼接字符串嘛，哎哟，想想就。。。然后就偷了个懒，用了模板字符串。接下来就上代码啦。

 1 `<div class="col-xs-6 col-md-6"
 2             style="border: 1px solid #eeeeee;
 3             display: flex;
 4             -webkit-align-items: center;
 5             align-items: center;
 6             -webkit-justify-content: center;
 7             justify-content: center;"
 8             id=${this.index}>
 9         <span style="color: #f10e0e;display: inline-block;
11               position: absolute;
12               top: 3px;
13               right: 3px;">
14               </span>
15         < img src= ${src} alt="" class="img-responsive">
16       </div>`;

噢啦，写是写出来了，那么问题来了，怎么append到父容器上呢？常规思路appenChild就ok啦，然后你会收到一个提示消息就是***不是一个节点，对哟，模板字符串嘛终究还是字符串，这又该怎么处理呢

1 container.append(issueImg);

1 btn.on('click', () => {
2 // to
3     });

好了，到这里可以说大工结束了，是不是感觉自己萌萌哒。。。

问题的关键来了，前端用的是啥呢，angular4 !!!

ngFor有必要了解一下！

ngFor指令是干啥的呢，敲黑板，重点来了：该指令用于基于可迭代对象中的每一项创建相应的模板。每个实例化模板的上下文对象继承于外部的上下文对象，其值与可迭代对象对应项的值相关联。

示例：

items = ['张三','李四','王二'];

同样的上面的也只要循环一下下就ok啦！

——来自一个时不时智商下线的程序媛小白

转载于:https://www.cnblogs.com/Vibge/p/9415951.html

误打误撞的模板字符串相关推荐

重学ES6 模板字符串
在两三年前,jQuery还是比较主流的开发技术,当我们要为页面添加DOM时,一般,我们是这样写的 $("#container").append('Today is <b> ...
ES6中的模板字符串---反引号``
在react中,反引号``有特殊的含义. 如MDN中所述,模板字符串(Template literals)允许嵌入表达式,并且支持多行字符串和字符串插补特性.基本语法为以下几种: 其中第一行为最基本用 ...
Freemarker基于模板字符串生成静态化html文件
基于字符串生成静态化文件,就不会通过模板文件.ftl了,也就是项目中压根就不存在模板文件,就是通过用户输入或在配置文件中定义一些模板字符串,基于这些字符串来生成静态化文件. 将字符串转换成模板:
Vue的模板字符串${}用法
var a = 1; console.log('一共有'+a+'个鸡蛋!') 使用模板字符串 console.log(`一共有${a}个鸡蛋!`)
ES6箭头函数和模板字符串
Es6 本章内容: 箭头函数箭头函数中this的指向数组的新方法模板字符串三点运算符结构赋值具体内容: 箭头函数的声明: Es6允许使用箭头函数(=>)定义箭头函数上面是箭头函数 ...
ES6新功能-模板字符串
ES6新功能-模板字符串 VS 传统JS字符串拼接
[译]JavaScript:ES6中的模板字符串简介
原文:http://tc39wiki.calculist.org/es6/template-strings/ ES6中的模板字符串(template string)是一种能在字符串文本中内嵌表达式的字 ...
ES6模板字符串【${}配合反单引号一起用】
转自: https://www.cnblogs.com/shihuc/p/10238511.html 先看看JavaScript中两个字符串的效果,就很容易知道模板字符串是个啥东西,其实一点也不新鲜. ...
ES6（二）——字符串模板、标签模板字符串、函数的默认参数、剩余参数、数组对象的展开语法、数值的表示、Symbol
一.字符串模板基本使用在ES6之前,如果我们想要将字符串和一些动态的变量(标识符)拼接到一起,是非常麻烦和丑陋的(ugly). ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接: 首 ...

误打误撞的模板字符串

误打误撞的模板字符串相关推荐

最新文章

热门文章