vue语法 `${ }%` 是什么意思;

在看vue开源的组件库的时候,看到这种语法。

return `${this.curSelectedIndex * (100 / this.listNum)}%`;

不解

回答:

这不是 Vue 的语法 是 ES6Template Strings 模版字符串
就是用占位符的方式来拼接字符串

const name = '小缘'
const age = 14
console.info(`大家好,我叫${name},今年${age}岁了`)
// 等价于
console.info('大家好,我叫' + name + ',今年' + age + '岁了')

// 最大的优势是支持换行字符串
const url = '//baidu.com'
const text = '百度一下,你就知道'
const html = `
  <div class="container">
    <a href="${url}">${text}</a>
  </div>
`
console.log(html)
console.log(typeof html)

可以去 Babel 官网查看编译后的结果

由于 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的风格,具体可以查看API
API

new Vue({
  delimiters: ['${', '}']
})

// 分隔符变成了 ES6 模板字符串的风格

回答:

es6 的字符串模板语法,和 Vue 无关

暂无评论

发表评论

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