vue中用数组语法绑定class

简单的绑定class就不说了，它可以和对象语法一样，使用data、computed、methods三种方法。说一下我在工作里体会到这种作法的好处。那么直接上代码。。。咔咔咔

说下需求，我是做一个显示框，当status为1时，代表成功状态，这个时候显示成功图片；当status为0时，代表失败状态，这个时候显示失败图片。我一开始的做法呢是使用v-if，这会才上代码看看，咳、咳

<div v-if="status===0"><img src="../images/failed.png" class="imgIcon">
</div><div v-else><img src="../images/success.png" class="imgIcon">
</div>

　这样子做呢，也不是不行哈，换个思路用绑定class写

html：

<div :class="classes"></div>

　js：

computed: {classes () {return ['imgIcon',{['imgIcon-' + this.status]: this.status !== ''}]}
}

　css：

.imgIcon{width: 2.6rem;height: 2.6rem;margin: auto 0;
}
.imgIcon-1{background: url(../assets/images/success.png) no-repeat center/cover;
}
.imgIcon-0{background: url(../assets/images/failed.png) no-repeat center/cover;
}

后来想了想，就替换img标签里src的值也可以

html

<img :src="imgName" class="imgIcon">

computed: {imgName () {return this.status ? "../images/success.png": "../images/success.png"}
}

　不过这里要特别注意一下图片的路径问题哦，不然可能不显示。

以上呢，是我工作中遇到的问题，可能解决思路不是很好，做个记录。

转载于:https://www.cnblogs.com/ddkei/p/9362151.html

vue中用数组语法绑定class相关推荐

【1 Vue基础 - 模板语法-绑定】
1 VSCode代码片段链接: link 2 Mustache双大括号语法插入内容 <body><div id="app"><!-- 1.基本使用 ...
五十九、Vue中的样式绑定
@Author:Runsen @Date:2020/10/16 大四是一个焦虑的时期.烦恼有时候是具体问题带来的压力,有时候却是无端的.莫名其妙的,有时候还极易受到外界的影响,别人一句话就会激起内心难 ...
vue html绑定数组,VueJs Class 与 Style 绑定数组语法
应用介绍操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因 ...
剖析Vue原理实现双向绑定MVVM
本文能帮你做什么? 1.了解vue的双向数据绑定原理以及核心代码模块 2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋, ...
在vue中怎么写行内样式高_说说在 Vue.js 中如何绑定样式（class 或 style）
在数据绑定中,最常见就是动态绑定元素的 class 或内联样式 style 咯,它们也是 HTML 的属性,所以可以使用 v-bind 指令 . 1 绑定 class 1.1 对象语法使用 v-bi ...
6.Vue Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是 attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易 ...
vue class与style绑定
介绍元素的class和style属于attribute,所以可以用v-bind处理.而在v-bind用于classhestyle时,vue.js专门增强了一下,接受的表达式结果除了字符串,还要数组和 ...
Vue学习笔记（1）（认识Vue、基础语法）
Vue2.x学习笔记.原视频教程:最全最新Vue.Vuejs教程,从入门到精通_哔哩哔哩 (゜-゜)つロ干杯~-bilibili 第一部分:认识Vue.Vue基本语法. 邂逅Vue.js 简单认识V ...
vue Class 与 Style 绑定
1. Class 绑定 1.1 对象语法普通对象单个类 <div v-bind:class="{ active: isActive }"></div> ...

vue中用数组语法绑定class

vue中用数组语法绑定class相关推荐

最新文章

热门文章