vue一个组件两种样式(Vue实现动态样式的多种方法汇总)
类别:编程学习 浏览量:1346
时间:2021-10-25 10:29:15 vue一个组件两种样式
Vue实现动态样式的多种方法汇总目录
- 1. 三元运算符判断
- 2. 动态设置class
- 3. 方法判断
- 4. 数组绑定
- 5. computed结合es6对象的计算属性名方法
<text :style="{color:state?'#ff9933':'#ff0000'}">hello world </text> <script> export default { data() { return { state: true } } } </script>
2.1 主要运用于:实现循环列表中点击时,相应的元素高亮;(默认首个元素高亮)
<template> <li class="wrapper" v-for="(item,index) in houseList" :key="index" @click="rightTap(index)"> <li class="houseTitle" :class="{'active' : index === rightIndex}"> {{item.name}} </li> </li> </template> <script> export default { data() { return { rightIndex:0, houseList:[] }; }, methods:{ rightTap(index){ this.rightIndex = index } } } </script> <style lang="scss" scoped> .wrapper{ width: 118px; height: 60px; margin: 6px auto 0 auto; .houseTitle{ font-size: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .active{ color:#2a7ffa; background-color: pink; } } </style>
2.2 主要运用于:为特定数值设置相应样式;
<li :class="activeId === item.id?'activeStyle':'machineBar'" v-for="(item,index) in List" :key="index" @click="clickEvent"> <p>{{item.name}}</p> </li>
3.1 主要运用于:为不同的数据值设置相应的样式;
<template> <li v-for="(item,index) in houseList" :key="index"> <li :style="getStyle(item.status)">{{item.name}}</li> </li> </template> <script> export default { data(){ return{ houseList:[ { id:1, name:1, status:'a' },{ id:2, name:2, status:'b' },{ id:3, name:3, status:'c' } ] } }, methods:{ getStyle(e){ console.log('值',e) if(e === 'a'){ return { width:'60px', height:'60px', background:'yellow', margin: '10px auto' } }else if(e === 'b'){ return { width:'60px', height:'60px', background:'red', margin: '10px auto' } }else if(e === 'c'){ return { width:'60px', height:'60px', background:'pink', margin: '10px auto' } } } } } </script>
3.2 主要运用于:在元素多从事件下,显示相应的样式;
<template> <li class="homeWrap" :class="{'select': selected === 1,'click': clicked === 1}" @click="handleClick(1)" @mousedown="menuOnSelect(1)"> 主页 </li> </template> <script> export default { return { selected: 0, clicked: 0 } methods:{ menuOnSelect(value){ this.selected = value; }, handleClick(value){ this.selected = 0 this.clicked = value } } } </script> <style lang="stylus" scoped> .homeWrap.select background red .homeWrap.click background yellow </style>
<li :class="[isActive,isSort]"></li> // 数组与三元运算符结合判断选择需要的class <li class="item" :class="[item.name? 'lg':'sm']"></li> <li class="item" :class="[item.age<18? 'gray':'']"></li> // 数组对象结合 <li :class="[{ active: isActive }, 'sort']"></li> data() { return{ isActive:'active', isSort:'sort' } } // css .active{ /*这里写需要设置的第一种样式*/ } .sort{ /*这里写需要设置的第二种样式*/ }
<li :class="classObject"></li> export default { data(){ return{ isActive:true } }, computed:{ classObject() { return{ class_a:this.isActive, class_b:!this.isActive // 这里要结合自身项目情况修改填写 } } } } // css .class_a{ /*这里写需要设置的第一种样式*/ } .class_b{ /*这里写需要设置的第二种样式*/ }
以上就是Vue实现动态样式的多种方法汇总的详细内容,更多关于Vue实现动态样式的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)
- vue中什么时候需要set属性(Vue.set和this.$set使用和区别)
- vue怎么使用element(Vue Element前端应用开发之图标的维护和使用)
- springbootvue数据交互系统(Springboot运用vue+echarts前后端交互实现动态圆环图)
- springboot如何解析vue登录参数(SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解)
- vue过滤器filters怎么用(如何使用vue过滤器filter)
- vue element 表格上拉加载数据(Vue组件库ElementUI实现表格加载树形数据教程)
- vue路由有几种实现模式(Vue实现路由过渡动效的4种方法)
- vue 为什么使用虚拟dom(Vue虚拟Dom到真实Dom的转换)
- vue代码和element用法(Vue Element前端应用开发之整合ABP框架的前端登录)
- vue element admin接口(Vue-Element-Admin集成自己的接口实现登录跳转)
- vue3兼容的插件多吗(关于vue3编写挂载DOM的插件问题)
- vue调用后台接口实现预览(vue实现集成腾讯TIM即时通讯)
- vue如何检查数组变化(Vue2中无法检测到数组变动的原因及解决)
- vue移动端项目用什么打包工具(浅谈使用Vue完成移动端apk项目)
- 面试问vue掌握程度如何回答(面试最常问的13种Vue修饰符)
- 如何快速赚钱(如何快速赚钱方法真实有效)
- 这里输入关键词(如何输入关键词)
- 熊猫中国国宝(熊猫国宝酒53酱香)
- 春节会放假几天(春节会放假吗)
- 小浴室,大民生 缙云3200多户困难群众洗上免费热水澡(小浴室大民生缙云3200多户困难群众洗上免费热水澡)
- 元旦闲谭(元旦闲谭)
热门推荐
- python语句三元运算符(Python中三元表达式的几种写法介绍)
- html5元素列表(HTML5触摸事件touchstart、touchmove和touchend的实现)
- selenium是否登录成功(使用selenium模拟登录解决滑块验证问题的实现)
- ubuntu设置用户免密码(Ubuntu修改密码及密码复杂度策略设置方法)
- flashfxp如何设置中文(flashfxp怎么用?flashfxp使用方法)
- Ext.MessageBox.show()的用法及参数配置
- SQL SERVER数据库状态
- 更改docker容器的ip地址(docker容器通过ping直接运行获取公网IP操作)
- SQL中的@@Error的使用
- python樱花绽放代码(新年快乐! python实现绚烂的烟花绽放效果)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9