随手记，经常用到。
根据 data 里面定义的变量，动态渲染页面上的样式。

  • 使用三元运算解决：【class=“pastPersons > 0 ? ‘select’ : ‘’”】这里 pastPersons为 data 中定义的变量，’select‘ 为写好的样式类名
<li class="pastPersons > 0 ? 'select' : ''">
  <div class="left-div0306">
    <i class="iconfont icon-qianyue"></i>
  </div>
  <div class="right-div0306">
    <h4 class="">6、<spring:message code="unite.center.visitor.labe8"/>
       ({{pastPersons}}/{{sum}})
    </h4>
  </div>
</li>
  • 使用 :Class 动态绑定
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue之class动态绑定</title>
 <style>
   .classA {
     color: red;
   }
   .classB {
     background: blue;
   }
   .classC {
     font-size: 20px;
   }
 </style>
</head>
<body>


<div id="demo">
 <h2>class绑定: :class='xxx'</h2>
 <p :class="myClass">class动态绑定的为 data 中定义的变量</p>
 <p :class="{classA: hasClassA, classB: hasClassB}">class动态绑定的是对象</p>
 <p :class="['classA', 'classB']">class动态绑定的是数组</p>

 <button @click="update">更新</button>

</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
 new Vue({
   el: '#demo',
   data: {
     myClass: 'classA',
     hasClassA: true,
     hasClassB: false
   },

   methods: {
     update () {
       this.myClass = 'classB'
       this.hasClassA = !this.hasClassA
       this.hasClassB = !this.hasClassB
     }
   }
 })
</script>
</body>
</html>
  • 使用 :style 动态绑定
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue之style绑定</title>
 <style>
   .classA {
     color: red;
   }
   .classB {
     background: blue;
   }
   .classC {
     font-size: 20px;
   }
 </style>
</head>
<body>


<div id="demo">
 
 <h2>style绑定</h2>
 <p :style="{color:activeColor, fontSize}">:style="{ color: activeColor, fontSize: fontSize + 'px' }"</p>

 <button @click="update">更新</button>

</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
 new Vue({
   el: '#demo',
   data: {
     activeColor: 'red',
     fontSize: '20px'
   },

   methods: {
     update () {
       this.activeColor = 'yellow'
       this.fontSize = '30px'
     }
   }
 })
</script>
</body>
</html>
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue