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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • CollectGarbage_The Collector

    CollectGarbage_The CollectorCollectgarbage- ItdoeswhatitsaysitdoesDefinitioncollectgarbage([opt[,arg]])Thisfunctionisagenericinterfacetothegarbagecollector.Itperformsdifferentfunctionsaccording

    2025年7月22日
    1
  • windows下更新pip源「建议收藏」

    windows下更新pip源更新pip源原因由于之前通过pip的一个命令将我所装的所有可更新的Python包均更新了一遍,导致好像将pip本身也更新了(也可能不是通过pip命令是conda命令将pip给更新了),结果就是之后我使用pip时,无论下载安装什么均是timeout!!!而且还提示我pip该更新了,当我使用python-mpipinstall–upgradepip…

    2022年4月16日
    195
  • httpclient4.X 设置代理请求(包含账号密码)[通俗易懂]

    httpclient4.X 设置代理请求(包含账号密码)[通俗易懂]最近需要使用Httpclient做后台请求,使用的是httpclient4.3版本,apache网站上有,我这里就不提供下载链接了,搜一下就可以了,废话少说,直接上代码:Java代码  import java.util.ArrayList;  import java.util.List;    import org.apache.http.HttpEntit

    2022年7月22日
    13
  • ETL开发流程小记(1)[通俗易懂]

    ETL开发流程小记(1)[通俗易懂][原创]ETL开发流程随笔ETL开发ETL工作目标ETL工作目的主要有:ETL工作流程准备工作ETL设计ETL开发ETL测试功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章U…

    2022年5月1日
    131
  • Vue父组件向子组件传值之props详解

    Vue父组件向子组件传值之props详解文章目录子组件必须通过props访问父组件数据注意:JavaScript中使用驼峰命名,HTML中使用短横线分割命名子组件中的data组件中的props子组件不能修改父组件中的数据组件实例的作用域是孤立的。这就意味着不能在子组件的模板内直接引用父组件的数据。父组件的数据需要通过props才能下送到子组件中。子组件必须通过props访问父组件数据一个组件可以直接在模板里面…

    2022年6月5日
    45
  • BP人工神经网络matlab工具箱_matlab神经网络控制

    BP人工神经网络matlab工具箱_matlab神经网络控制自己测试人口预测的matlab实现:x=[54167551965630057482587966026661465628286465365994672076620765859672956917270499725387454276368785348067182992852298717789211908599242093717949749625997542987051000721016541030081…

    2025年9月12日
    3

发表回复

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

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