032:vue中三元运算, style、class、type、 event等多种场景示例

这篇具有很好参考价值的文章主要介绍了032:vue中三元运算, style、class、type、 event等多种场景示例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

032:vue中三元运算, style、class、type、 event等多种场景示例,# vue2常用示例500+,vue.js,elementui,javascript

第032个

查看专栏目录: VUE ------ element UI

专栏目标

在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。
(1)提供vue2的一些基本操作:安装、引用,模板使用,computed,watch,生命周期(beforeCreate,created,beforeMount,mounted, beforeUpdate,updated, beforeDestroy,destroyed,activated,deactivated,errorCaptured,components,)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if,v-on,v-pre,v-cloak,v-once,v-model, v-html, v-text, keep-alive,slot-scope, filters, v-bind,.stop, .native, directives,mixin,render,国际化,Vue Router等

(2)提供element UI的经典操作:安装,引用,国际化,el-row,el-col,el-button,el-link,el-radio,el-checkbox ,el-input,el-select, el-cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form, el-table, el-tree, el-pagination,el-badge,el-avatar,el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el-popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop,v-infinite-scroll, el-drawer等

需求背景

在vue的项目中,我们经常用三元运算来简化if-else的操作,这样会减少代码量,阅读起来也比较通畅。我们在下面的介绍中,会介绍单条件和多条件的场景,也会介绍style,type,class,event,文本内容中的三元运算示例。

032:vue中三元运算, style、class、type、 event等多种场景示例,# vue2常用示例500+,vue.js,elementui,javascript

单条件和多条件

1、条件 ? 表达式1 : 表达式2

条件为 true ,执行表达式1,为 false 执行表达式2

示例: a=1? b:c

2、多条件运算

条件1 ? 表达式1 : 条件2 ? 表达式2 : 条件3 ? 表达式3 : 表达式4

当条件1为true执行表达式1,返回false,执行条件2,条件2返回false,执行条件3,条件3如果返回true,则执行表达式3,否则执行表达式4,以此类推

示例: a=1?b:c=2?d:e=4?f:g

多种场景

event

示例:<el-button type=“primary” @click=“edit == ‘mod’ ? modify() : submit()”>提 交

style

示例::style=“{left: 10 + ‘px’,color:weixin ==‘gis-dajianshi’ ? ‘red’ : ‘’}”

class

示例1:<div:class=“[‘classify’,current==‘0’ ? ‘active’ : ‘’]” @click=‘current=0’>xx</ div>
示例2:<div :class=“‘classify’+(current==‘0’?’ active’:‘’)” @click=‘current=0’>xx</ div>

type

示例:<el-button :type=“on[1]?‘primary’:‘default’” @click=“dajianshi()”> 大剑师

文本内容

示例:文章来源地址https://www.toymoban.com/news/detail-733631.html

{{edit ? ‘大剑师’ : '兰特}}

到了这里,关于032:vue中三元运算, style、class、type、 event等多种场景示例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vue3】数据绑定,动态渲染class与style

    数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式(style)。因为 class 和 style 都是 attribute,我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是,在处理比较 复杂的绑定 时,通过拼接生成字符串是麻烦且易出错的。因此,Vue 专门为

    2024年02月13日
    浏览(39)
  • vue 3 第二十七章:样式(动态class、动态style)

    在 Vue 中,我们可以使用动态绑定语法来动态地添加类名或样式。本章将介绍 Vue 3 中如何使用动态绑定语法来动态地添加类名或样式。 在 Vue 中,我们可以使用 :class 或 v-bind:class 指令来动态地添加类名。例如,下面的例子中,我们可以根据 isActive 的值动态地为元素添加 act

    2024年02月07日
    浏览(41)
  • 视频讲解vue2基础之style样式class类名绑定

    目录  style样式的动态绑定 class类名动态绑定 一:官方给出的写法 二:自创三元表达式写法  详细的视频讲解:002vue_样式的动态绑定_哔哩哔哩_bilibili 003vue_样式动态绑定(小案例)_哔哩哔哩_bilibili 详细的视频讲解:002vue_样式的动态绑定_哔哩哔哩_bilibili 003vue_样式动态绑定

    2023年04月15日
    浏览(48)
  • vue、uniapp中动态添加绑定style、class 9种方法实现

    直接使用静态class和style属性: 使用场景:当class和style属性是固定不变的时候,可以直接在模板中写死。 优点:简单直接,没有额外的计算和逻辑。 缺点:无法根据条件动态修改class和style。 使用v-bind动态绑定class和style属性: 使用场景:当class和style属性需要根据组件的da

    2024年02月10日
    浏览(48)
  • Vue2 第五节 class与style绑定,条件渲染和列表渲染

    1.class与style绑定 2.条件渲染 3.列表渲染 (1)绑定class 就是用v-bind绑定一个class 有三种不同的写法 1. 字符串写法:适用于样式的类名不确定,需要动态指定    2.数组写法:适用于要绑定的个数个名字都不确定,数组中的样式连同class里面有的样式都会绑定到div中    3. 对象写

    2024年02月15日
    浏览(32)
  • vue2和vue3关于class类的绑定以及style的绑定的区别

    本篇为个人笔记 例如:单个类绑定 多个类绑定:   例如:单个绑定  多个绑定

    2024年02月16日
    浏览(39)
  • 报错信息in ./src/App.vue?vue&type=style&index=0&lang=scss

    完整报错信息:报错信息in ./src/App.vue?vuetype=styleindex=0lang=scssSyntax Error: Error: Unknown keyword formatMinimum 问题根源,在app.vue的style标签中加入lang=scss 但是标签里面注释的语法有误导致的报错 scss的注释语法应该如下:

    2024年02月13日
    浏览(43)
  • vue项目启动报错 in ./src/App.vue?vue&type=style&index=0&lang=scss解决办法

    出现这个问题真恶心,原因是低版本兼容性问题,摸索了一上午时间 总结最实用的 方法 在此记录一下, 第一步 ,先卸载 sass-loader 如果卸载也报错,就执行下的代码 第二步 再安装一个sass@1.26.5和sass-loader@7.0.0版本 最后 ,安装低版本的sass-loader需要引入node-sass依赖来支持,请

    2024年02月07日
    浏览(42)
  • VUE 字段为空时,一个class搞定,适用多种情形

    我抄的,我抄的,我抄的,我抄的,我抄的 但真香 在写表格时,当某字段为空,你是否是这样写的: 如果有多个字段需要判断,你是否要写多个空字段的判断??? 回答我,是或者不是!!! 在下不才,写了个适用于大多数el-table、el-description、el-collapse等、但不限于这些内容的

    2024年02月21日
    浏览(51)
  • class与 style绑定

    在Vue中,我们可以通过绑定不同的class来实现对元素的样式操作。Vue提供了多种方式来绑定HTML class,包括对象语法、数组语法以及在组件上使用class属性。 对象语法允许我们根据不同的条件来动态地添加或删除class。以一个按钮元素为例,我们可以使用v-bind指令来绑定一个对

    2024年02月15日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包