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"

classArray:['red','gree']

classArray.push('blue');
classArray.pop();

vue入门：v-bind:class相关推荐

vue入门（猴子都能学会）
目录一. vue简介 1. Vue.js是什么? 2. 库和框架的区别 3. MVVM的介绍二.Vue入门 1.导入js依赖 2.定义vue所管理边界 3.创建vue实例挂载边界三. Vue事 ...
Vue框架---Vue入门
Vue概述 Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架 vue.js的核心特点-响应的数据绑定传统的js操作页面:在以前使用js操作页面的时候是这样的,需要操作某个html ...
vue入门教程（二）
8. 事件处理可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. <button @click="test1">test1&l ...
Vue入门之animate过渡动画效果
简介: transition方法的使用 transition内置方法 transition-group animate库实现过渡动画 `<!DOCTYPE html>` `<html ...
Vue 入门之搭建vue脚手架
系列文章目录第一章 Vue 入门之搭建vue脚手架第二章 Vue入门之项目结构介绍第三章 Vue入门之基本语法第四章 Vue入门之企业站点开发实践第五章 Vue入门之前端部署文章目录系列 ...
Vue入门之组件化开发
Vue入门之组件化开发 http://www.jianshu.com/p/6718ab1caa81 组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的 ...
VUE入门笔记，第二节
VUE入门笔记,第二节一.总结以上:实例-表格列表 [目标:实现表格数据的添加.删除和过滤筛选] [解决方案] <!DOCTYPE html> <html lang="e ...
VUE入门笔记，第一节
VUE入门笔记,第一节一.MVVM分层思想 M:用来保存每个页面中的单独的数据 V:每个页面中的HTML结构 VM:它是M和V层的调度者,它分割了M和V层,用于处理M和V层的数据双向绑定二.VUE ...
Vue入门（Vscode）
Vue是一套构建用户界面的渐进式框架.只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件[解决前端开发痛点"复杂的dom ...
Day7：Vue入门学习——传智播客学习笔记【微服务电商】
本节依旧是前端内容,但还是了解一下基础的入门知识学习目标会创建Vue实例,知道Vue的常见属性会使用Vue的生命周期的钩子函数会使用vue常见指令会使用vue计算属性和watch监控会编写 ...

vue入门：v-bind:class

三目表达式

对象

数组

vue入门：v-bind:class相关推荐

最新文章

热门文章