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按需引入elementui组件(vue ElementUI实现异步加载树)
- vue路由跳转的方法(Vue路由监听实现同页面动态加载的示例)
- vue 实现吸顶效果(vue实现水波涟漪效果的点击反馈指令)
- vue插槽实例(Vue中插槽slot的使用方法与应用场景详析)
- vuex中action的值怎么接(vuex中Getter的用法详解)
- vue验证码(vue_drf实现短信验证码)
- vueaxios使用教程交流(Vue使用axios图片上传遇到的问题)
- vue调用组件内部的方法(Vue如何实现组件间通信)
- vuejs组件使用教程交流(Vue vee-validate插件的简单使用)
- vue手动清除keepalive缓存(vue中keep-alive组件的用法示例)
- vue页面关闭前的执行(Vue 页面监听用户预览时间功能的实现代码)
- vueclass和style绑定(Vue中Class和Style实现v-bind绑定的几种用法)
- vuecli项目入门(vue-cli4.5.x快速搭建项目)
- vue左侧边栏的制作(Vue+Vant实现顶部搜索栏)
- vue3 兄弟组件(vue3如何按需加载第三方组件库详解)
- vue3.0路线图(Vue3.0 自己实现放大镜效果案例讲解)
- 来了 成都轨道交通5条线路刷新 进度条(成都轨道交通5条线路刷新)
- 一部手机两套系统 OPPO Find X3的正确打开方式你知道吗(一部手机两套系统)
- OPPO用户看过来 汇总几个春节实用技巧,轻松搞定多设备联动玩法(汇总几个春节实用技巧)
- 北京旅游攻略(北京旅游攻略5日游及其花费)
- 四川旅游攻略(四川旅游攻略自由行攻略)
- 上海迪士尼攻略(上海迪士尼攻略旅游)
热门推荐
- Mongodb数据导入导出
- python中mod函数的使用方法(详解Python3中ceil函数用法)
- centos7系统密码忘了怎么办(CentOS 7忘记密码解决方案过程图解)
- sqlserver常用函数(SQLServer 日期函数大全小结)
- win7安装安卓模拟器(腾讯云服务器怎么安装安卓模拟器 可以安装安卓模拟器吗)
- laravel命令控制器怎么设置(Laravel获取当前请求的控制器和方法以及中间件的例子)
- reacthooks基础使用(React 小技巧教你如何摆脱hooks依赖烦恼)
- Asp.net导出Excel乱码
- html5中table属性(Html5之自定义属性data-,dataset)
- css实现动画的方法(CSS实现悬停过渡动画三部曲)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9