vue绑定class的几种方式

1.对象语法
在对象上绑定class属性，来控制class 的几种状态。

<body><div id = "app"><h1 :class = "{'active': isActive}">hello world!</h1>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>var app = new Vue({el: '#app',data: {isActive: true}})
</script>
</body>

2.数组语法
将class的属性值组成一个数组来控制class的各种属性，当class 需要有多个属性的时候就要用数组语法来绑定其中的值，这样做的好处是有利于动态修改class的值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.active{color: red;width: 100px;height: 300px;}</style>
</head>
<body><div id = "app"><div :class="[isActive ? activeCls : '', errorCls]"></div>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>// 绑定数组运算符号var app = new Vue({el: '#app',data: {isActive: false,activeCls: 'active',errorCls: 'error'}})
</script>
</body>
</html>

3.在组件上使用
如果在组件上使用class 或者：clas上，样式规则会直接应用到这个组件的跟元素上，如下所示：

<body>
<div id = "app"><my-component :class="{'active': isActive}"></my-component>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>// 自定义组件Vue.component('my-component',{template: '<p class="article">这是一些文本文章！！！！</p>'});// 绑定数组运算符号var app = new Vue({el: '#app',data: {isActive: false}})
</script>

最终渲染后的结果为

<p class="article">这是一些文本文章！！！！</p>

这种用法仅仅适用于自定义组件的外层是一个根元素，否则会无效，当不满足这种条件或者给具体的子元素设置类名的时候应当使用组件的props来传递。

vue绑定class的几种方式相关推荐

vue 绑定class的几种方式
对象语法给v-bind:class 设置一个对象,可以动态地切换class,如下 <div id="app"><div :class="{'activ ...
初学必懂—vue绑定class的几种方式+绑定内联样式总结
文章目录本篇博客主要学习内容
深入解析react关于事件绑定this的四种方式
这篇文章主要介绍了详解react关于事件绑定this的四种方式,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 在react组件中,每个方法的上下 ...
【vue】vue组件传值的三种方式
前言 vue的组件传值分为三种方式:父传子.子传父.非父子组件传值引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递父组件通过 prop 给子组件下发数据,子组件通过事件 ...
vue 组件通信的几种方式
前言在vue中, 组件的关系不外乎以下三种: 组件是需要通信的,在开发中,常用到的通信方式有:vuex.eventBus.以及props与emit.$parent与$children,除此之外,还 ...
Vue组件通信的五种方式
Vue组件通信的五种方式文章目录 Vue组件通信的五种方式一. props/$emit(父子通信) 二. vuex(组件之间通信) 三. 事件总线EventBus(组件之间通信) 四. provi ...
vue组件通信的几种方式
vue组件通信的几种方式最近用vue开发项目,记录一下vue组件间通信几种方式第一种,父子组件通信一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Chil ...
vue三种ajax请求方式,vue请求数据的三种方式
请求数据的方式: vue-resource 官方提供的 vue的一个插件 axios fetch-jsonp 一,vue-resource请求数据介绍:vue-resource请求数据方式是官方提供 ...
详解vue 路由跳转四种方式 (带参数)
本文介绍了vue 路由跳转四种方式 (带参数),本文通过实例代码给大家介绍的详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1. router-link 1. 不带参数 <router-li ...

vue绑定class的几种方式

vue绑定class的几种方式

vue绑定class的几种方式相关推荐

最新文章

热门文章