请问vue 可以绑定事件时 执行三元表达式吗？

Question

请问vue 可以绑定事件时 执行三元表达式吗? 示例如下

<div id="app">
    <button @mousedown="editable?change:''">change</button>
    <div v-text="text"></div>
</div>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            text:123,
            editable:true
        },
        methods:{
            change:function () {
                this.text=456;
            }
        }
    })
</script>
当editable为true时 需要绑定change事件，但是 这种三元表达式 写法好像不行。

Answer 1

可以写成：@mousedown="() => editable ? change() : otherMethod()"

不过建议还是直接把 editable 的逻辑写到 change 方法里

change () {
  if (!this.editable) return
  // ...

Answer 2

你在change事件里面判断下 editable不行么？

   change() {
       if (this.editalbe) {
        ...
        }
    }

Answer 3

可以这样

  <button v-if="editable" @mousedown="change">change</button>
  <button v-if="!editable">change</button>

Answer 4

尝试下面两种方式
1.建议写法，在函数里面判断editalbe

change() {
   if (this.editalbe) {
    ...
    }
}

2.html+v-if判断

<button v-if="editable" @mousedown="change">change</button>
<button v-if="!editable" @mousedown="otherChange">change</button>