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

waynebruce
  • 282

请问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事件,但是 这种三元表达式 写法好像不行。
回复
阅读 4.1k
4 个回答
✓ 已被采纳

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

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

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

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


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

可以这样

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

尝试下面两种方式
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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏