vue三目运算绑定class写法

html代码：<div :class="use ? 'class2': 'class1' ">三目运算绑定class</div>script中代码：new Vue({el: '#app',data:{use: false}});style中代码.class1{background: #444;color: #eee;}.class2{background:red;color

可可爱爱的你吖

3562人浏览 · 2020-09-07 14:33:55

可可爱爱的你吖 · 2020-09-07 14:33:55 发布

html代码：

 <div :class="use ? 'class2': 'class1' ">
    三目运算绑定class
 </div>

script中代码：

new Vue({
    el: '#app',
  data:{
      use: false
  }
});

style中代码

.class1{
  background: #444;
  color: #eee;
}
.class2{
  background:red;
  color:yellow;
}

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}$/, //不连续的两位字母// /^