Skip to content

[Discussion] 事件绑定时是否需要支持在模板中直接书写多段 JavaScript 语句 #46

@ChrisCindy

Description

@ChrisCindy

示例:

<template>
  <div @click="{{console.log('123');count = count + 1;}}"></div>
</template>

方案一:SFC 模板中禁止该语法

  1. 运行时模板中使用模板字符串形式绑定,而 ${} 占位符中仅允许书写 JavaScript 表达式而非语句。为保证运行时模板和 SFC 模板尽量一致,建议 SFC 模板中也不支持该种写法;
  2. 用户有该需求时,可以在模板中使用箭头函数绑定:
<template>
  <div @click="{{() => { console.log('123');count = count + 1; }}}"></div>
</template>

或者绑定方法,将逻辑写在方法内:

<template>
  <div @click="{{ handleClick }}"></div>
</template>
function handleClick() {
  console.log('123');
  count = count + 1;
}

方案二:仅 SFC 模板支持,文档中强调此为语法糖

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions