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监控对象变化(Vue之监听方法案例详解)
- vue加载html5动画(vue实现旋转木马动画)
- vuejs指令解析(Vue.js中的计算属性、监视属性与生命周期详解)
- vue接收网络请求数据类型配置(vue中对接Graphql接口的实现示例)
- vue怎么定义router的动态路由(vue.js Router中嵌套路由的实用示例)
- vuecli打包项目(使用vue-cli创建项目并webpack打包的操作方法)
- vue 实现吸顶效果(vue实现水波涟漪效果的点击反馈指令)
- vue指令使用技巧(Vue指令工作原理实现方法)
- vue浏览pdf文件(如何在vue中使用pdfjs预览pdf文件)
- vue控制div滚动条(vue3实现CSS无限无缝滚动效果)
- vue怎么接收后台的数据(Vue封装全局toast组件的完整实例)
- vue 为什么要使用key(详解vue中v-for的key唯一性)
- ant design 的vue批量操作(ant desing vue table 实现可伸缩列的完整例子)
- vue虚拟dom如何转换成真实dom的(vue中对虚拟dom的理解知识点总结)
- vue3.0怎么往标签填数据(Vue3.0写自定义指令的简单步骤记录)
- vue单元测试实例(Vue-Jest 自动化测试基础配置详解)
- 新闻周刊 青岛网红 赵厂长 编段子一箩筐输出快乐,陪父亲十二载勇斗病魔(新闻周刊青岛网红)
- 44岁夏雨演谋女郎爸,大其24岁却看不出,互动不怕袁泉吃醋(44岁夏雨演谋女郎爸)
- 全椒人,你还记得吗 那年,那人,那网,那些我们的青春记忆(全椒人你还记得吗)
- 全椒人在苏州10周年联谊会在苏州举办(全椒人在苏州10周年联谊会在苏州举办)
- 这个全椒人被通报表彰,看看你认识吗(这个全椒人被通报表彰)
- 全椒人,38年集体回忆 1980-2018 ,看完不要哭(全椒人38年集体回忆)
热门推荐
- laravel图文消息后台处理(laravel利用中间件防止未登录用户直接访问后台的方法)
- js Date对象
- 修改sqlserver数据库名称步骤(SQL server数据库创建代码 filegroup文件组修改的示例代码)
- docker容器启动失败怎么查找原因(解决docker安装后运行hello-world报错的问题)
- laravel 开发自定义组件(laravel实现上传图片并在页面显示的例子)
- python html文字分段(Python对HTML转义字符进行反转义的实现方法)
- js扫雷小游戏源代码(原生js实现简单贪吃蛇小游戏)
- phpstudy服务器怎么设置(PHPStudy打开网页很慢的原因及解决方案)
- 微信html隐藏功能(使用Html5多媒体实现微信语音功能)
- C#栈和堆的区别
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9