vue使用三元表达式设置style,class

这篇具有很好参考价值的文章主要介绍了vue使用三元表达式设置style,class。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

前端开发中,面对复杂的布局,有时会需要用到三元表达式,来设置布局样式。

实现

一、设置style,使用 :style="{ '样式名' : '样式值' }" 来设置,必须是字符串形式。

<template>
  <text :style="{'background': isWhite ? 'white':'#00ff00'}">三元表达式设置style</text>
  <text :style="{'width': l_width, 'height': l_height}">三元表达式设置style</text>
</template>

<script>
  export default {
    data() {
      return {
        l_width:'100rpx',
        l_height:'100rpx',    
      }
    }
  }
</script>

二、设置class,

1、数组形式

<template>
  <text :class="['item', itemStatus==0?'active':'']" >三元表达式设置style</text>
</template>

<script>
  export default {
    data() {
      return {
        itemStatus:0, // 0:高亮显示,即设置active
      }
    }
  }
</script>

<style>
.item{width:100%; height:100rpx;}
</style>

注意:数组中的item必须加引号。若不加引号,代表的时data中的一项对象,并不是类名;将item加上引号就可以变成类名。

2、字符串拼接,两个字符串之间必须要有空格。

<template>
  <text :class="'status'+(itemStatus==0?' active':'')" >三元表达式设置style</text>
</template>

<script>
  export default {
    data() {
      return {
        itemStatus:0, // 0:高亮显示,即设置active
      }
    }
  }
</script>

<style>
.status0{color:red,font-size:30rpx}
.status1{color:blue,font-size:30rpx}
.status2{color:green,font-size:30rpx}
</style>

注意:active前面要加一个空格(空格个必须有)。

3、绑定对象【推荐】,通常给class绑定对象,这样就可以动态切换样式。

  • 数组形式:[样式1,样式2]
  • 对象形式:{判断条件}。
<template>
  <text :class="[itemStatus==0?'status0':'status1']" >三元表达式设置style</text>
  <text :class="{active: isActive}" >三元表达式设置style</text>
</template>

<script>
  export default {
    data() {
      return {
        itemStatus:0, 
        isActive:false, // false / true
        status0:{'color':'red','font-size':'30rpx'}
        status1:{'color':'blue','font-size':'30rpx'}
      }
    }
  }
</script>

4、数据标记文章来源地址https://www.toymoban.com/news/detail-680328.html

<template>
  <text class="red" v-show="title">三元表达式设置style</text>
  <text class="red" v-if="title">三元表达式设置style</text>
</template>

<script>
  export default {
    data() {
      return {
        title:'absdefg',
      }
    }
  }
</script>

<style>
.red{color:red,font-size:30rpx}
</style>

到了这里,关于vue使用三元表达式设置style,class的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • python多变量赋值和三元表达式出错(求解答)

    直接给出问题吧,以后只在定义是进行多变量同时赋值算了。希望有大神能够解答 我以为方法一和方法二是等价的,还是我太年轻了,根本不一样。 如果不是多变量在三元表达式里面用,法一和法二 倒是正常输出。如下示例

    2024年02月15日
    浏览(40)
  • Python中的三元运算符:简洁高效的条件表达式

    什么是三元运算符 三元运算符是一种简洁高效的条件表达式,用于根据条件的真假来返回不同的值。它是一种特殊的运算符,由三个操作数组成,形式为 [结果为真的值] if [条件] else [结果为假的值] 。 Python中的三元运算符语法 Python中的三元运算符的语法如下: 三元运算符的

    2024年01月19日
    浏览(59)
  • 7.JS里表达式,if条件判断,三元运算符,switch语句,断点调试

    表达式就是可以被求值的代码比如什么a = 1 语句就是一段可以执行的代码比如什么if else 直接给B站的黑马程序员的老师引流一波总结的真好 就是基本上所有的语言都会有的if else 语句就是满足不同的条件执行不同的代码,让计算机有条件判断的能力。 注意在if的括号里面除了

    2024年02月20日
    浏览(52)
  • 使用正则表达式设置强密码

    强密码需要同时含有大写字母、小写字母、数字、特殊符号。 这边先展示我自己写的。 以上代8位以上的强密码。 下面是具体解析: 正则表达式测试工具里可以自行检测写的对不对 目前较为简便的一种使用方法是搭配ApiModel和Pattern对变量进行配置。 如

    2024年02月14日
    浏览(57)
  • Vue表单提交正则表达式验证使用案例

    一、验证表单用法 1、表单布局及变量定义 2、定义表单中用到的实例、变量、交互dto等 3、验证规则表达式 说明: 1、sendRules 是表单使用的验证规则对象 2、属性 xxxNo 是具体校验那个属性字段 3、属性 required 非空校验 4、属性 message 提示字样 5、属性 trigger 触发事件 6、

    2024年02月16日
    浏览(40)
  • vue指令-插值表达式

    双大括号,可以把vue数据变量直接显示在标签内 data函数返回对象上,用key属性声明 示例:

    2024年02月15日
    浏览(35)
  • Cron在前端的使用,vue与element ui的vue-cron插件的使用及将定时任务cron表达式解析成中文

    执行下面npm命令: npm install vue-cron --save 在想使用cron的vue页面引入以下: import VueCron from ‘vue-cron’ import Vue from ‘vue’ Vue.use(VueCron) 运行 在vue页面“style scoped”中通过控制样式去掉秒年 #changeContab /deep/ #tab-0 { display: none; } #changeContab /deep/ #tab-5 { display: none; } 简易的工具类 可根

    2024年02月11日
    浏览(54)
  • 【javaSE】 Lambda表达式与Lambda表达式的使用

    Lambda表达式是Java SE 8中一个重要的新特性。lambda表达式允许你通过表达式来代替功能接口。 lambda表达式就和方法一样,它提供了一个正常的参数列表和一个使用这些参数的主体(body,可以是一个表达式或一个代码块)。 Lambda 表达式(Lambda expression) ,基于数学中的λ演算得名,也

    2024年02月08日
    浏览(62)
  • 中缀表达式转后缀表达式,使用逆波兰计算。可以计算小数

    传递一个分开保存符号与数字的List即可:List SumNumber; 获取参数的构造方法如下: 要求的List保存数据的方式如下: 例如:1+2+3 然后使用 EvaluatePostfixExpressions 方法传递出一个保存好结果的String。

    2024年02月15日
    浏览(53)
  • vue3 setup中函数表达式和函数声明

    随着 Vue 3 中 Composition API 的引入,现在可以通过函数表达式和函数声明这两种方式声明函数。 函数声明是在非函数式编程语言中声明函数的传统或正常方式。以 function 开头,后跟函数名称、一对括号,最后是一对括住函数体的花括号。 这是一个例子: 函数声明的一个

    2024年02月13日
    浏览(41)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包