vue绑定事件时候使用三元表达式

最新推荐文章于 2023-08-04 15:30:08 发布

开水没有冬天

最新推荐文章于 2023-08-04 15:30:08 发布

阅读量609

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_42995876/article/details/132060375

版权

文章讨论了在JavaScript中，尤其是在Vue.js的模板中，如何正确使用三元表达式时处理方法括号的问题，强调了是否需要添加括号取决于是否作为事件处理函数的一部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果使用三元表达式，方法要加括号，如果不使用三元表达式，方法则可以不加括号

<!-- 使用三元表达式，handleAdd方法要加括号 -->
<el-button @click.native="isCreate ? '' : handleAdd()">新增</el-button>

<!-- 没有使用三元表达式，handleAdd可以不加括号 -->
<el-button @click="handleAdd">新增</el-button>

<button @mousedown="editable?change:''">change</button>

==>
@mousedown="() => editable ? change() : otherMethod()"

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

开水没有冬天

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue动态绑定事件、传递参数

m0_51431448的博客

08-15

332

vue动态传递不确定个数的参数到子组件这个还是经常用的，动态绑定不确定个数的事件就不太常用了，写这篇也是因为自己没有好好看官方文档，所以来记录一下。下面的代码示例就采用vue2了，vue3也是一样的。相信大家对vue的父传子已经很熟悉了。假设子组件接受下面三个参数：那我们父组件可以单独传递：也可以一块儿通过v-bind直接传递整个对象，相当于将对象中的进行结构全部传递，官网也有写：https://cn.vuejs.org/api/built-in-directives.html#v-bind

vue实战指南 vue中的三元运算

热门推荐

姚辉乾

08-13

1万+

<h2>v-bind</h2> <h2 v-bind:class="g">V-bind demo</h2> <h2 v-bind:class="{red:off}">接收判断条件</h2> <h2 v-bind:class="{r,g}">{r:r,

vue,uinapp内@click内三元表达式

slow097的博客

10-16

1365

<el-button type="primary" @click="tyep == '0' ? addO() : addO1()">确定</el-button>

同一个按钮想绑定多个事件的方法

m0_52946104的博客

09-21

1817

ie8 以下，和ie8 以上，this 分别指向window和当前调用对象的问题

vue @click 使用三目运算（实现动态更换绑定的函数）

weixin_30604651的博客

01-26

1676

转载：https://www.jianshu.com/p/ea4471c9f333 @click 错误写法 @click="dialogStatus=='create'?createData:updateData" 正确写法 @click="dialogStatus=='create'?createData():updateData()" 类 class &lt...

vue三元式进行样式绑定

qq_42352516的博客

05-24

419

Vue 三元式进行样式绑定 <template slot-scope="scope"> <el-tag :type="(scope.row.audit == 'pass' ? '' : (scope.row.audit == 'auudit' ? 'success' : (scope.row.audit == 'reject' ? 'danger' : 'warning')))" disabled-transitions> {{scope.row.audit}} &l

vue在:class书写三元表达式

09-02

在 Vue 中，你可以使用 `:class` 来书写三元表达式。下面是一个示例： ```html <div :class="isActive ? 'active' : 'inactive'">... ``` 上述代码中，`isActive` 是一个在 Vue 实例中定义的变量或计算属性，它的...

vue中class类名根据绑定的值三元表达式或字符串拼接动态添加类名

格の调

01-08

1805

如下这个html标签，最终根据数据返回值是，1则表示男性，2则表示女性，渲染2种不同的icon图标。 <span class=“gender bg-muted fa-nanxing”></span> <span class=“gender bg-muted fa-nvxing”></span> 有2种实现方法： 1、数组方法 <span :class='["gender","bg-muted",data.gender===1 ? "fa-nanxing

vue的style的三元表达式

09-02

在Vue的style中使用三元表达式是非常常见的，可以根据条件动态地应用样式。假设我们有一个`isRed`的数据属性，它表示是否要将样式设为红色。我们可以在`<style>`标签中使用三元表达式来根据`isRed`的值来决定是否...

vue 三元表达式 动态style

04-20

除了三元表达式，Vue还提供了更强大的动态样式绑定方式，可以使用对象语法来动态设置多个样式。例如： ```html , color: isRed ? 'white' : 'black' }">这是一个动态样式的元素 ``` 上述代码中，`:style`绑定了一...

记录一下，在vue中动态绑定src中使用三元表达式是无效的！！

SkipCode Blog

10-27

3100

在vue中动态绑定src中使用三元表达式是无效的要切换的话可以使用v-for来判断

vue动态绑定多个class以及带上三元运算或其他条件

一步一个脚印，踏实努力，向着目标前进

08-04

8196

动态绑定样式属性和类绑定是最常用的方法，它们提供了灵活和动态改变样式的能力。计算属性适用于需要根据多个属性的值来计算样式属性值的情况，可以使代码更加清晰和可维护。根据具体的需求和个人偏好，可以选择合适的方法来动态添加样式

涨芝士:三元运算符里嵌套三元运算符与Vue的template里调用methods的方法

我仰泳一级棒

01-05

2055

背景前提: 某个需求优化,用户头像要做逻辑判断,后端接口返回两个字段,一个字段是userImage(用户自己上传的头像), 另一个是sexImage(性别头像:男和女) 逻辑一: 若userImage有值就直接显示 userImage:‘xxxxx’ 的头像,后面的性别头像就不管了逻辑二: 前面的 userImage:“ ” ,就取性别头像, sexImage:“man” (男生头像), sexImage：“woman” (女生头像) 逻辑三: 若 usrImage:" " 和 sexImage

vue Element change 的绑定以及用法

m0_59769246的博客

12-06

2313

Element change的用法

Vue button多选单选问题（点击选中可改变样式）

weixin_43912081的博客

08-01

1490

做出如上效果利用:class="item.ischeck == true ? 'btn_selected' : ''"三元表达式判断是否选中并改变样式代码片段如下： <div class="intent_btn"> <van-button style="width: .90rem;" v-for="(item, index) in List" :key="index" :class="item.ischeck == true ? 'btn_selected' : ''"

关于使用三元运算符来判断下拉框选项是否选中的总结

weixin_30646315的博客

02-03

546

我们经常会从后台传递一组数据，这一组数据需要放到一个select下拉框中，并且要判断是否要选中其中某一个值错误的做法是 <select > 　　<option selected="${value.week==1?'selected' :''}>周一</option>" 　　<option selected="${value.week==...

Vue指令

世界和我们都不该止步于此

04-24

1494

在Vue中我们都知道有数据驱动视图（单向数据绑定）和双向数据绑定这俩个特性我们今天着重阐述一些常用指令（Directives）那么第一个问题来了--什么是指令？它是Vue为我们开发者提供的模板语法，辅助我们渲染页面基本结构其中属于单向数据绑定指令的有：内容渲染指令--属性绑定指令--事件绑定指令目录一.内容渲染指令 1.v-text 2.{{}} 3.v-html 二.属性绑定指令三.JavaScript表达式四.事件绑定指令五.常用事件修饰符六.键盘...

vue click点击绑定两个事件

骨子里的偏爱

03-15

3979

vue click点击绑定两个事件