扫码关注官方订阅号
在看vue开源的组件库的时候,看到这种语法。
return `${this.curSelectedIndex * (100 / this.listNum)}%`;
不解
小伙看你根骨奇佳,潜力无限,来学PHP伐。
这不是 Vue 的语法 是 ES6 的 Template Strings 模版字符串就是用占位符的方式来拼接字符串
Vue
ES6
Template Strings
const name = '小缘' const age = 14 console.info(`大家好,我叫${name},今年${age}岁了`) // 等价于 console.info('大家好,我叫' + name + ',今年' + age + '岁了') // 最大的优势是支持换行字符串 const url = '//baidu.com' const text = '百度一下,你就知道' const html = ` <p class="container"> <a href="${url}">${text}</a> </p> ` console.log(html) console.log(typeof html)
可以去 Babel 官网查看编译后的结果
由于 SF Markdown BUG 链接打开会丢失代码,请手动复制下面链接打开查看
SF
Markdown
BUG
http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Cstage-2&targets=&browsers=&builtIns=false&code=const%20name%20%3D%20'%E5%B0%8F%E7%BC%98'%0Aconst%20age%20%3D%2014%0Aconsole.info(%60%E5%A4%A7%E5%AE%B6%E5%A5%BD%EF%BC%8C%E6%88%91%E5%8F%AB%24%7Bname%7D%EF%BC%8C%E4%BB%8A%E5%B9%B4%24%7Bage%7D%E5%B2%81%E4%BA%86%60)
建议先把 ES6 啃熟再来学框架 否则还会有更多你看不懂的写法点击查看ES6模板字符串详细Can I Use?
把默认的{{ }}模式匹配改成了ES6的风格,具体可以查看APIAPI
new Vue({ delimiters: ['${', '}'] })
// 分隔符变成了 ES6 模板字符串的风格
es6 的字符串模板语法,和 Vue 无关
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
这不是
Vue的语法 是ES6的Template Strings模版字符串就是用占位符的方式来拼接字符串
可以去 Babel 官网查看编译后的结果
由于
SFMarkdownBUG链接打开会丢失代码,请手动复制下面链接打开查看建议先把
ES6啃熟再来学框架 否则还会有更多你看不懂的写法点击查看ES6模板字符串详细
Can I Use?
把默认的{{ }}模式匹配改成了ES6的风格,具体可以查看API
API
// 分隔符变成了 ES6 模板字符串的风格
es6 的字符串模板语法,和 Vue 无关