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


相关推荐

  • 初学css list-style属性「建议收藏」

    初学css list-style属性「建议收藏」网上很多css布局中会看到这样的一句:list-style:none;那么list-style到底什么意思?中文即:列表样式:无;其实它是一个简写属性,包含了所有列表属性,具体包含list-sty

    2022年8月5日
    12
  • java遍历数组的各种方法_遍历数组的常用方法「建议收藏」

    java遍历数组的各种方法_遍历数组的常用方法「建议收藏」1.最传统方法for循环1vararr=[“first”,”second”,”third”,”fourth”,3,5,8];2for(vari=0;i<arr.length;i++){3console.log(arr[i]);4}5//输出:6first7second8third9fourth10311512…

    2025年12月6日
    5
  • postman汉化版下载_postcrossing中文版

    postman汉化版下载_postcrossing中文版postman汉化版下载之后直接解压使用或者替换对应版本下的resources/app.asar重要提醒:不要更新下载地址:链接:https://share.weiyun.com/0TFvHgOq密码:<atitle=”o35jeq”>&nbsp;&nbsp;</a>…

    2022年9月27日
    1
  • noip2020提高组试题_noip提高组

    noip2020提高组试题_noip提高组2020.04.01【NOIP提高组】模拟B组【0.LeftOut】题解题目大意:FarmerJohn正在尝试给他的牛群拍照。根据以往的经验,他知道这一工作往往结果不怎么样。这一次,FarmerJohn购买了一台昂贵的无人机,想要拍一张航拍照。为了使照片尽可能好看,他想让他的奶牛们在拍照时都朝向同一个方向。奶牛们现在在一块有围栏的草地上排列成N×N(2≤N≤1000)的方阵,例如:R…

    2025年8月20日
    6
  • phpstorm 2021.7.20 激活码【中文破解版】

    (phpstorm 2021.7.20 激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.htmlML…

    2022年3月21日
    50
  • 关于maven项目打jar包运行main方法

    关于maven项目打jar包运行main方法因项目需要,在main方法中需读取spring配置文件,完成插入操作。然后打包成jar包,运行main方法。具体操作:main方法中读取spring文件:ClassPathXmlApplicationContextcontext=newClassPathXmlApplicationContext(“spring-mybatis.xml”);要改成你自己的配置文件。Service…

    2022年6月19日
    119

发表回复

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

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