vue中v-bind:class动态添加class

最新推荐文章于 2022-06-27 13:40:39 发布

weixin_30800987

最新推荐文章于 2022-06-27 13:40:39 发布

阅读量104

点赞数

原文链接：http://www.cnblogs.com/yingzi1028/p/5473895.html

版权

1.html代码

 <template v-for='item in names'>
     <div id="app" class="selectItem" v-bind:class="{'selected': item.Members}" v-on:click='addSelectedTagForMembers($index)'>{{item.name}}</div>
 </template>

template中的div拿的 data下names的name，v-bind:class="{'selected': item.Members}" 的意思是当names下的Members==true时给div的class动态添加selected

2.selectedCSS样式

.selected{
 background: #33baff;
}

3.JavaScript代码

new Vue({
  el: '#app',
  data: {
 isA: true,
  isB: false,
 names:[
        {name:'张三三',Members:false,Leader:false},
        {name:'毛豆豆',Members:false,Leader:false},
        {name:'淘气',Members:false,Leader:false},
        {name:'二蛋',Members:false,Leader:false},
        {name:'强子',Members:false,Leader:false},
        {name:'剩下的',Members:false,Leader:false},
        {name:'小时',Members:false,Leader:false},
        {name:'豆豆',Members:false,Leader:false},
        {name:'按时',Members:false,Leader:false},
        {name:'形势下',Members:false,Leader:false}
        ]
 }
})

4.v-on:click事件代码

addSelectedTagForMembers:function(index){
    this.names[index].Members=true;
 }

转载于:https://www.cnblogs.com/yingzi1028/p/5473895.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30800987

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue3知识点2. 常用指令v-model :value v-if v-show v-for v-bind: :class :style v-on @

yangyangdt的博客

12-19

9277

vue3基础知识点2 前言：上一章已经学会如何创建vue实例了，这一章是vue一些的基础知识点，包括模板语言，以及常见的一些命令。最底部有运行好的全部代码链接。

【Vue】—动态绑定v-bind

道阻且长，行则将至。

08-07

252

【Vue】—动态绑定v-bind

参与评论您还未登录，请先登录后发表或查看评论

vue：v-bind动态绑定

前端之行，任重道远！

04-24

1104

一，v-bind介绍二，v-bind实践 <body> <div id="app">   <img v-bind:src="imgURL" alt=""> <a v-bind:href="aHref">百度一下</a> &

v-bind:class

qq_36981190的博客

11-16

804

1、数组语法我们可以把一个数组传给 v-bind:class，以应用一个 class 列表： <div v-bind:class="[activeClass, errorClass]"></div> 注意：1、activeClass和errorClass若是不带单引号则需要在data中定义， 2、若v-bind:class="[‘activeClass’, ‘errorClass’],带单引号的话则不要定义，直接在style中写样式 ...

Vue 中动态添加class（使用v-bind:class）

weixin_30262255的博客

10-23

695

今天在Vue中动态修改类名，元素的样式就是不改变，类名也没有加上去，里面的问题具体我还是不太清楚，有可能是因为自己不认真，把 :class= 后面的内容的格式给整错了，下面将正确的做法记录一下，便于以后查看。用法一：参考： HTML示例： //将下面nav_datas数组中的数据给渲染出来，并利用nav_datas中的class_true的boolean值来表示该元素类名是否存在 &lt...

Vue.js基础-06-绑定样式（v-bind）-01-绑定class属性（v-bind:class）

运维玄德公

05-28

2046

1. class 属性绑定语法示例完整示例 2. 属性的覆盖 2.1 绑定多个值相互覆盖语法示例完整示例 2.2 绑定一个对象（对象成员间覆盖）语法示例完整示例 3. 绑定对象的计算属性语法示例完整示例 4. 绑定数组 4.1 直接绑定一个数组语法示例完整示例 4.2 覆盖顺序 4.3 绑定一个是数组的object 4.4 控制数组成员是否生效语法示例完整示例再次强调顺序...

解决v-for中使用v-if或者v-bind:class失效的问题

10-17

在Vue.js开发过程中，我们经常会遇到在`v-for`循环中使用`v-if`或`v-bind:class`（简写为`:class`）时遇到一些失效的问题。这主要是由于Vue的渲染机制导致的，理解这个问题的关键在于理解Vue的响应式系统和虚拟DOM的...

在vue中使用v-bind:class的选项卡方法

10-17

在Vue.js框架中，`v-bind:class`指令用于动态地绑定一个或多个CSS类到元素。这个特性使得我们可以根据组件的数据状态来切换元素的样式，从而实现动态UI效果。在本例中，我们将学习如何使用`v-bind:class`实现一个...

在vue中v-bind使用三目运算符绑定class的实例

10-17

在Vue.js框架中，动态绑定元素的class是一个常见的需求。为了实现这一功能，开发者可以利用v-bind指令结合...总之，在Vue中灵活运用v-bind指令与三目运算符绑定class，可以极大地提高应用的交互性和用户体验。

Vue- 对象语法 v-bind:class与对象语法的使用（重要）

热门推荐

heartOfblack 离开了电脑，我不希望我还有病

02-28

3万+

我们可以传给 v-bind:class 一个对象，以动态地切换 class 。 div v-bind:class="{ active: isActive }">div>//对象语法也就是在v-bind:class绑定一个对象的时候，里面的值将影响最终取值，//比如如果这里isActive的值为true 则会被渲染成class='active' 如果为false , 则

v-bind指令动态绑定class和内联样式style

11-03

268

动态绑定class—概述数据绑定（v-bind指令）一个常见需求是操作元素的 class 列表。因为class是元素的一个属性，我们可以用v-bind处理它们我们只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在v-bind用于class 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。动态绑定cl...

Vue内置指令之v-bind绑定class的介绍与举例

weixin_43275631的博客

01-26

6003

v-bind主要用于解决HTML元素属性值的绑定问题，用于响应更新HTML元素的属性，将一个或多个属性或一个组件的prop动态绑定到表达式。 v-bind绑定class，绑定方式：对象语法，含义class后面跟的是一个对象用法： 1.直接通过{}绑定一个类 <h2 :class = "{'active':isActive}">Hello World</h2> 2.通过判断传入多个值 <h2 :class="{'active':isActive

Vue 学习笔记4 —— 绑定 Class 和 Style

我有两颗糖

03-05

129

1. 绑定 HTML Class # 对象语法可以传给 v-bind:class 一个对象，动态切换 class，属性名为类名，属性值为 true 则类有效： <div id="root" class="A" v-bind:class="classObject"></div> let vm = new Vue({ el: "#root", data: { isActive: true, classObject: {

vue基础知识（三）

发果叁

06-27

1950

v-bind 对于类名操作的增强, 需要注意的是:class 不会影响到原来的 class 属性。:class=“对象/数组”(1) :class=“对象”{ 类名: 布尔值, 类名: 布尔值 }如果是true, 加上这个类, 如果是false, 移除这个类(2) :class=“数组”[‘类名1’, ‘类名2’, ‘类名3’]只要有这个类, 就加上:style=“对象”例如 :style=“{ width: ‘200px’ }”是 vue 为开发者提供的功能，常用于文本的格式化。过滤器主要是用来转换格式。

2020-09-29 vue学习笔记——Class 与 Style 绑定（绑定内联样式）

qq_46580089的博客

09-29

275

Class 与 Style 绑定——绑定内联样式 1、对象语法 v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名： <div id="app"> <div b-bind:style="styleObj">1</div> //这里直接绑定到对象，看起来更加的简介 &lt

Vue动态绑定属性—指令v-bind

韩旭不会敲代码吧的博客

07-20

1816

1、v-bind指令的介绍和基本使用 (1)作用：动态绑定属性除了内容需要动态来实现之外，有时候元素的属性我们也希望能够动态来改变比如可以动态绑定a元素的href属性，img的src属性等等。 (2)与插值操作的对比：插值操作的主要作用是将Vue实例中的数据插入到模板当中，改变data中的数据可以动态改变显示的内容。而很多时候我们的属性值也是需要变化的，比如src可能是从服务器请求过来的，把值放到vue实例的data中，然后将data中的属性赋到模板中的属性里面，我们只需要修改data中的值就可以实时

Vue进阶（二十五）：＜component＞实现动态组件

IT全栈华强工作室

12-22

1万+

元素是vue 里面的一个内置组件。在里面使用 v-bind: is，可以实现动态组件的效果。例子解析：下面例子创建一个包含多个子组件的 vue 实例。 vue代码部分：新建 vue 实例 “app”，这个实例的 components 里面，有3个组件，这些组件都有各自的模板。分别是 acomp，bcomp，ccomp html 代码部分：使用vue 的内置组件，并使用 “is...

vue入门：v-bind:class

软考鸭

02-05

1168

v-bind:class 对普通属性绑定进行扩展，普通属性绑定只支持表达式。扩展为支持三目表达式、对象、数组三目表达式支持单个class是否添加的控制如 v-bind:class="isRed?'red':''" 对象支持多个class 同时控制例如 v-bind:class="classObj" classObj:{ red:true, green:false, blue:true } 数组实现动态添加、删除class v-bind:class="classArray" classA

vue-动态绑定属性v-bind

米儿的博客

01-15

781

1.v-bind动态绑定属性比如动态绑定a元素的href属性，img元素的src属性 2.v-bind动态绑定class对象 3.v-bind动态绑定class数组语法 4.v-bind动态绑定style

Vue动态添加红字样式：v-bind:class实战教程

在本篇文章中，我们将深入探讨如何在Vue.js中实现...通过这个例子，你将学到如何在Vue.js中使用v-bind:class动态管理CSS类，以及如何结合数据驱动的方式实现样式切换。这在构建响应式和可维护的前端应用时非常有用。