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实现动态样式的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vue怎么引入axios(如何用vue封装axios请求)
- vue 如何执行动态js(如何利用vue.js实现拖放功能)
- vue3兼容的插件多吗(关于vue3编写挂载DOM的插件问题)
- springbootvue数据交互系统(Springboot运用vue+echarts前后端交互实现动态圆环图)
- vue element admin接口(Vue-Element-Admin集成自己的接口实现登录跳转)
- vue项目有element插件(Vue Element前端应用开发之前端API接口的封装)
- google 调试vue(Vue实现Google第三方登录的示例代码)
- vue图片组件使用方法(Vue图片裁剪组件实例代码)
- vue怎么注册公共组件(解读Vue组件注册方式)
- vue websocket实时刷新数据(Vue+WebSocket页面实时刷新长连接的实现)
- vue组件轮播(vue+rem自定义轮播图效果)
- vue3 axios 怎么封装api(vue中如何简单封装axios浅析)
- vue自定义组件修饰符(Vue自定义组件使用事件修饰符的踩坑记录)
- vue 修改后刷新(Vue使用三种方法刷新页面)
- vue 表格数据增加修改(vue element实现表格增加删除修改数据)
- vue项目引入element页面(vue-element-admin项目导入和导出的实现)
- 越难春卷(越难春卷皮怎么用)
- 休闲VS新古典 办公家居简约设计(办公家居简约设计)
- 15个新成 园 位置公布 深圳龙岗2022年共建花园建设又有大动作(15个新成园位置公布)
- 记者手记 书记带我去 巡街(记者手记书记带我去)
- 富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元 | 美通社(富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元)
- 二次创业 的富士胶片,在进博会上首次展示完成转型后的全线医疗产品(二次创业的富士胶片)
热门推荐
- iis为什么找不到文件(iis 不能下载包含中文文件名的rar文件)
- ASP.NET实现多文件上传
- ubuntu下vscode的使用教程(Vscode远程连接Ubuntu出错问题的解决方法)
- css3独有属性(CSS3 calc会计算属性详解)
- mac更改mysql密码(Mac下mysql 8.0.22 找回密码的方法)
- dockerpull下来的容器存放位置(详解docker pull下来的镜像存储在哪里)
- python实现列表删除重复元素(Python代码实现删除一个list里面重复元素的方法)
- css一键布局(css多种方式实现双飞翼布局)
- laravel设置读写权限(解决laravel上传图片之后,目录有图片,但是访问不到404的问题)
- dockergitlab自动化教程(docker+gitlab+jenkins从零搭建自动化部署)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9