vue中动态改变样式

最快捷迅速的做法

 1. vue中可以 自定义class类,同时允许存在v-bind：class指令来进行书写样式，这两者并不冲突，可以并存。  2. 根据第一条，我们可以： class中书写必有的样式，然后用 :class搭配三元运算符进行动态样式判断  3. 这个方法其实就是组件中 data   style  三元运算符的应用 好理解，易上手，极力推荐

<template><div><divclass="grid-content" @mouseover="mouseOver" @mouseleave="mouseLeave"><divclass="select_icon level_center":class="active == true ? 'select_a' : 'select_b'"></div><divclass="select_char level_center":class="active == true ? 'select_charActive' : 'select_charNoactive'">         能力图谱</div></div></div></template><script>exportdefault{data(){return{       active:false,};},created(){},   methods:{mouseOver(){this.active=true;},mouseLeave(){this.active=false;},},   computed:{},};</script><style lang='less' scoped>.grid-content{//使用gutter使其自适应了,高度关掉// width: 300px;   height:300px;   background: #1b1f27;   border:1px solid #6c93e3;   border-radius:10px;   position: relative;.select_icon{     width:165px;     height:144px;     position: absolute;     top:48px;     transition: background1s linear;}.select_char{     width:259px;     height:40px;     background: #272b35;     border-radius:20px;     top:239px;     font-size:24px;     font-family: Microsoft YaHei;     font-weight:400;     text-align: center;     line-height:40px;     transition: color1s linear;}//变化后的样式.select_charNoactive{     color: #8e9fa8;}.select_charActive{     color: #67fff8;}.select_a{     background:url("../assets/home/nenglitupu.png") no-repeat;     background-size:100%100%;}.select_b{     background:url("../assets/home/changjing.png") no-repeat;     background-size:100%100%;}}</style>

对象语法

 1.对象语法简单写一下，需要注意：对象里面多个样式的类，第二个需要用双引号括起来  2.对象语法其实就是：组件中style部分于data部分的结合

下面代码仅仅是在说明一个方式，代码并不具备操作性

<template><div><divclass="grid-content">//当 isActive 或者 hasError 变化时，class 列表将相应地更新。//例如，如果 hasError 的值为 true，class 列表将变为 "select_icon select_char select_charNoactive select_b"。<divclass="select_icon select_char":class="{ select_charNoactive: isActive, 'select_b': hasError }"></div></div></template><script>exportdefault{data(){return{       isActive:true,       hasError:false};},created(){},   methods:{mouseOver(){this.active=true;},mouseLeave(){this.active=false;},},   computed:{},};</script><style lang='less' scoped>.select_icon{     width:165px;     height:144px;     position: absolute;     top:48px;     transition: background1s linear;}.select_char{     width:259px;     height:40px;     background: #272b35;     border-radius:20px;     top:239px;     font-size:24px;     font-family: Microsoft YaHei;     font-weight:400;     text-align: center;     line-height:40px;     transition: color1s linear;}//变化后的样式.select_charNoactive{     color: #8e9fa8;}.select_charActive{     color: #67fff8;}.select_a{     background:url("../assets/home/nenglitupu.png") no-repeat;     background-size:100%100%;}.select_b{     background:url("../assets/home/changjing.png") no-repeat;     background-size:100%100%;}</style>

数组语法

下面代码仅仅是在说明一个方式，代码并不具备操作性

 1.数组语法简单写一下  2.数组语法其实就是：组件中style部分于data部分的结合，但是非常恶心的是他并不是非常的直接，样式的类名  其实是写在数据中。(看代码吧)  3. 如果你也想根据条件切换列表中的 class，可以用三元表达式：  <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

<template><div v-bind:class="[activeClass, errorClass]"></div></template><script>exportdefault{data(){return{     		  activeClass:'active',               errorClass:'text-danger'}},created(){}, methods:{}, computed:{}}</script><style lang='less' scoped>.active{  	text-align: center;     line-height:40px;     transition: color1s linear;}.text-danger{ 	text-align: center;     line-height:40px;     transition: color1s linear;}</style>//最终渲染为 <div class="active text-danger"></div>