vue中动态改变样式

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>

手赚鸭会员

打赏 收藏 海报 链接