vue动态绑定class的几种常用方式小结

2024-04-14 19:11:28

本文实例讲述了vue动态绑定class的几种常用方式。分享给大家供大家参考，具体如下：

对象方法

最简单的绑定（这里的active加不加单引号都可以，以下也一样都能渲染）

:class="{ 'active': isActive }"

判断是否绑定一个active

:class="{'active':isActive==-1}"

或者

:class="{'active':isActive==index}"

绑定并判断多个

第一种（用逗号隔开）

:class="{ 'active': isActive, 'sort': isSort }"

第二种（放在data里面）

//也可以把后面绑定的对象写在一个变量放在data里面，可以变成下面这样
:class="classObject"
data() {
 return {
  classObject:{ active: true, sort:false }
 }
}

第三种（使用computed属性）

:class="classObject"
data() {
 return {
  isActive: true,
  isSort: false
 }
},
computed: {
 classObject: function () {
  return {
   active: this.isActive,
   sort:this.isSort
  }
 }
}

数组方法

单纯数组

:class="[isActive,isSort]"
data() {
 return{
  isActive:'active',
  isSort:'sort'
 }
}

数组与三元运算符结合判断选择需要的class

（注意：三元运算符后面的“：”两边的class需要加上单引号，否则不能正确渲染）

:class="[isActive?'active':'']"

或者

:class="[isActive==1?'active':'']"

或者

:class="[isActive==index?'active':'']"

或者

:class="[isActive==index?'active':'otherActiveClass']"

数组对象结合动态判断

//前面这个active在对象里面可以不加单引号，后面这个sort要加单引号
:class="[{ active: isActive }, 'sort']"

或者

:class="[{ active: isActive==1 }, 'sort']"

或者

:class="[{ active: isActive==index }, 'sort']"

希望本文所述对大家vue.js程序设计有所帮助。

vue.js选中动态绑定的radio的指定项

上一文,介绍了vue.js动态添加.删除绑定的radio选项,本文介绍如何选中radio的某一项绑定的数据和上文的model是一致的,选中radio或者checkbox需要注意的是: 不管<input type='radio checked='true''> 你的checked属性值是true或者false,他都会选中. 选中不选中,不是看checked的属性值,而是看有没有checked这个属性,所以,动态选中,不用v-model,也不用checked='true',判断是否需要渲染ch
vue.js给动态绑定的radio列表做批量编辑的方法

每个题目绑定的题目结构如下json对象,每次动态添加选项就是将其加入了vue实例的某个数组对象中: vm.options.push({ id: "", text: "新选项", checked: false }); 现在对radio或者checkbox集合列表进行批量添加,这里使用到了textarea容器. textare每一行都是一条数据,它的内部是根据回车来区分(break-word自动换行不算),每一行是一个对象,整体就是一个文本数组了,获取如下: var c
vue动态绑定class选中当前列表变色的方法示例

这个小技巧在工作当中是非常实用而且经常用到的希望小伙伴儿们能学到. 先看看效果图吧接下来我们看看怎么实现的吧在methods中写入一个方法 clickcategory(index){ // 这里我们传入一个当前值 this.categoryIndex = index } 然后需要在data里面注册一下 data() { return { categoryIndex: 0, //点击当前背景变成白色索引 } }, 在css中设置我们当前选中项为active的类名,并给与一个白色的背景颜色
vue动态绑定组件子父组件多表单验证功能的实现代码

前端项目中经常会下拉或者选项卡,如果通过if,else或者switch去判断加载的话会产生大量冗余代码和变量定义,而且都写在一起后人很难维护. Vue核心在于组件,如果有内容通过选项卡或者下拉框切换用动态加载子组件最好不过. 如图: selects文件夹中,index只负责公共数据(当然公共数据也可以写在其他文件,只留一个入口文件),而comp文件夹中的几个组件则通过动态加载. 动态加载子组件:component // 给下拉框绑定下拉列表的索引 <el-select v-model="v
快速解决vue动态绑定多个class的官方实例语法无效的问题

首先,直接进入正题,我想要给一个dom绑定多个class,而且是动态绑定,这个时候可以用v-bind简写可以写为" :"冒号,我查了官方的语法, 具体如下:  <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[cl
vue 中动态绑定class 和 style的方法代码详解

先列举一些例子 class="['content',{'radioModel':checkType}]" class="['siteAppListDirNode',{open:appitem.open==true}]" class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]" class="{shortcutMenuShow:!showHideNav,
Vue.js实现按钮的动态绑定效果及实现代码

实现效果: 实现代码以及注释: <!DOCTYPE html> <html> <head> <title>按钮绑定</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte
vue中v-for通过动态绑定class实现触发效果

vue动态绑定class练习. :class="{ '类名1':条件表达式,'类名2':条件表达式- }" <template> <div class="app-*"> <ul> <li v-for="(item,i) of list" :key="i" class="item" @click="clickIndex=i" :class=&quo
vue实现条件判断动态绑定样式的方法

在我们做前端页面的时候,为了美观和直观,我们希望通过条件判断来让页面显示不同的样式,如下图所示: 当值为"是"时,显示绿色的标签,当值为"否"时,显示为灰色的标签. 标签的样式分别为: <el-tag type="success">绿色标签</el-tag> <el-tag type="info">灰色标签</el-tag> 关键在于type的样式部分,我们利用vue的样式绑定,
详解Vue.js动态绑定class

Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM "绑定"到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新.基于这种特性,通过vue.js动态绑定class就变得非常简单. 1. 数据绑定 vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下: <a v-bind:href="http://www.cnblogs.c
vue中动态绑定表单元素的属性方法

在vue中有时候可能想像使用jq一样给某个元素添加属性,如 $('#select1').attr('disabled','disabled') 这种方法也能实现,但是在vue中能用vue的方法还是尽量不要使用jq 使用vue的方法来添加属性可以这样: <select v-model='issues' class="ui dropdown t-select-list" :disabled='isDisabled'> <option></option>

vue动态绑定class的几种常用方式小结

相关推荐

随机推荐