ES6 模板字符串用法

ES6 模板字符串用法解决字符串拼接问题使用模板字符串,可以省去‘+’拼接的操作,反引号“之间的视为一个整体view:<pv-html=”getHtml()”></p>method:getHtml(){leth1=`<h1>这是一个h1元素内容</h1>`returnh1}结果:通过表达式拼接对象属性使用${}表达式可以直接拼接对象属性的值:letuser={

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

解决字符串拼接问题

使用模板字符串,可以省去 ‘+’ 拼接的操作,反引号“之间的视为一个整体

view:

<p v-html="getHtml()"></p>

method:

getHtml () { 
   
   let h1 = `
     <h1>
       这是一个h1元素内容
     </h1>
   `
   return h1
 }

结果:
在这里插入图片描述

通过表达式拼接对象属性

使用 ${} 表达式可以直接拼接对象属性的值:

let user = { 
   
  name: 'abc'
}
let str = `
  用户名称为:
  ${ 
   user.name}
`
console.log(str)

结果:
在这里插入图片描述

通过表达式拼接方法返回值

对于方法同理,我们也可以使用 ${}

getData () { 
   
  return 123
},
demo () { 
   
  let str = `
    用户名称为:
    ${ 
   this.getData()}
  `
  console.log(str)
}

结果:
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/171835.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • mse pytorch_pytorch scatter

    mse pytorch_pytorch scatter基本概念均方误差(meansquareerror,MSE),是反应估计量与被估计量之间差异程度的一种度量,设ttt是根据子样确定的总体参数θ\thetaθ的一个估计量,(θ−t)2(\theta-t)^{2}(θ−t)2的数学期望,称为估计量ttt的均方误差。pytorch中MSELoss函数介绍torch.nn.MSELoss(size_average=True,reduce=Tru…

    2022年9月18日
    0
  • Pytest(2)使用和调用方法

    Pytest(2)使用和调用方法Pytest执行用例规则Pytest在命令行中支持多种方式来运行和选择测试用例1.对某个目录下所有的用例pytest2.对模块中进行测试pytesttest_mod.py3.对文件夹进行

    2022年7月31日
    3
  • JavaBean详解

    JavaBean详解一、概述JavaBean是一种可重用的Java组件,它可以被Applet、Servlet、SP等Java应用程序调用.也可以可视化地被Java开发工具使用。它包含属性(Properties)、方法(Methods)、事件(Events)等特性。***JavaBean是一种软件组件模型,就跟ActiveX控件一样,它们提供已知的功能,可以轻松重用并集成到应用程序中的java类。***任何可以用J…

    2022年7月17日
    12
  • es6 转es5_es5 es6是什么

    es6 转es5_es5 es6是什么项目js没有用vue的福音情景问题 项目有很多新的js语法es6es7等等 如你所愿市面上很多浏览器已经大部分支持这些与语法了 但是ie就差强人意了直接歇菜如何解决 利用node插件完成语法降级实施情景 #安装babel npminstall–save-dev@babel/core #安装转码规则 npminstall–save-dev@babel/preset-env #规则加入babel.config.json

    2022年9月25日
    0
  • 蓝桥杯历年真题及详细解答

    蓝桥杯历年真题及详细解答这里是蓝桥杯历年的题目汇总,后面将会陆续更新将往年真题以及解答发布出来,目前先更新C语言B组的,欢迎各位小伙伴关注我吖,你们的关注就是给我最好的动力!!!蓝桥杯历年省赛真题Java语言A组省赛真题Java语言B组省赛真题C语言A组省赛真题C语言B组省赛真题Java语言A组省赛真题2012第三届JavaA组蓝桥杯省赛真题2013第四届JavaA组蓝桥杯省赛真题2014第五届JavaA组蓝桥杯省赛真题2015第六届JavaA组蓝桥杯省赛真题2016第七届JavaA组蓝.

    2022年7月16日
    13
  • Vue学习之实例生命周期

    Vue学习之实例生命周期Vue学习之实例生命周期

    2022年4月23日
    28

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号