vue之class绑定数组形式

1.html结构

 <div id="app">//这里填写的是data里的key值<div :class="[activeClass,errorClass]">测试样式</div><button @click="handle">切换</button></div>

2.style

   <style>.active {border: 1px solid red;width: 100px;height: 100px;}.error {background-color: orange;}</style>

3.script

    <script>// 使用数组的方式会直接把data中对应的类名渲染到数据中var vm = new Vue({el: '#app',data: {activeClass: 'active',errorClass: 'error'},methods: {handle: function () {this.activeClass = '';this.errorClass = '';}}})</script>

vue之class绑定数组形式相关推荐

撸一个vue的双向绑定
1.前言说起双向绑定可能大家都会说:Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更 ...
Ant Design Vue 组件@chang绑定方法如何传递自定义参数
Ant Design Vue 组件@chang绑定方法如何传递自定义参数今天在写代码的时候遇到一个问题: 在嵌套标签中外层使用了一个v-for循环去循环一个数组,当内层想要拿取index,并且使用 ...
小猿圈解析vue数据双向绑定的缺点
vue是当今前端很流行的一种框架,但是vue也是有一定的缺陷的,你有过了解吗?下面小猿圈web前端老师就为你解析一下vue数据双向绑定的缺陷,希望对你有所帮助,下面我们一起了解一下吧. 1.vue 实 ...
Vue Angular 双向绑定检测不到对象属性的添加和删除
由于ES5的限制 Vue && Angular 双向绑定检测不到对象属性的添加和删除还有数组增加索引.这些改变不会触发change事件.Vue是因为实例化的时候已经把各个属性都s ...
Vue中实现清空数组和清空el-table
场景要实现的效果是那么就要用到怎样将这个el-table清空,即在vue中怎样将数组清空. 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公 ...
[js高手之路] vue系列教程 - vue的事件绑定与方法(2)
一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 1 window.onload = function () { 2 var c = new Vue({ 3 e ...
西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
vue的双向绑定原理及实现
前言使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...
vue 监听map数组变化_解决vue无法侦听数组及对象属性的变化问题
一.数组 1.可以监听到的情况如push.splice.=赋值(array=[1,2,3]) 2.无法监听到的情况使用下标修改某个元素(这种比较常见) array[index] = 1 objec ...

vue之class绑定数组形式

1.html结构

2.style

3.script

vue之class绑定数组形式相关推荐

最新文章

热门文章