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


相关推荐

  • Composer实战教程

    Composer实战教程

    2022年3月6日
    47
  • 设计模式之代理模式XXOO

    设计模式之代理模式XXOO定义代理模式可以分为两种,一种是静态代理,一种是动态代理。静态代理:代理类一般会持有一个被代理的对象引用,且对于不关心的方法全部委托给被代理的对象处理。自己处理关心的方法。这种代理方式是死板的,它不是在运行时动态创建,它就是硬编码,你代码编译前写的是什么,编译后就是什么。换句话就是你按下CTRL+S的那一刻,就会被代理对象生成一个不可动态改变的代理类。静态代理一般对于代理的对象是单个或者多个固定的类(数量不会太多)使用。效果会比动态代理要好。动态代理:动态代理又分为JDK动

    2022年7月17日
    10
  • Rancher Fleet使用教程

    Rancher Fleet使用教程Rancherfleet介绍https://fleet.rancher.io/https://github.com/rancher/fleet博客截止日期为:20201204当前官网版本为v0.3.0,但在实践中发现此版本使用私有仓库无法正常工作,更新为v0.3.1可正常使用;有一些官方文档说的不清楚的地方,在这篇博客中进行了完善;fleet是一个轻量级的gitops工具,不管是管理单个集群还是大量集群都有很好的性能;两段pull工作模式:Fleetmanagerpullfr

    2022年6月14日
    54
  • intellijidea激活码_通用破解码

    intellijidea激活码_通用破解码,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月16日
    84
  • 详解Java线程池参数

    详解Java线程池参数详解线程池参数目前线程池的类一般使用spring的:org.springframework.scheduling.concurrent.ThreadPoolTaskExecutorJDK的:java.util.concurrent.ThreadPoolExecutor它们的配置差不多,spring的做了一些配置参数的简化,最终调用JDK的API参考资料:https://blog.c…

    2022年6月5日
    26
  • 华三vlan配置教程_思科模拟器交换机划分vlan命令

    华三vlan配置教程_思科模拟器交换机划分vlan命令1.配置步骤(1)配置DeviceA<DeviceA>system-view[DeviceA]vlan100[DeviceA-vlan100]portgigabitethernet1/0/1[DeviceA-vlan100]quit[DeviceA]vlan200[DeviceA-vlan100]portgigabitethernet1/0/2[Device…

    2022年9月19日
    0

发表回复

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

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