Vue 动态属性数据绑定_vue3 el-option动态绑定数据(1)

最新推荐文章于 2024-09-07 15:14:14 发布

2401_86637436

最新推荐文章于 2024-09-07 15:14:14 发布

阅读量402

点赞数 5

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2401_86637436/article/details/141996451

版权

    }
    .red {
        color:  red;
    }
</style>


![在这里插入图片描述](https://img-blog.csdnimg.cn/27901cca06694be4a93819f66dc310bc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ICB5biI5aW95oiR5piv5aSn55m9,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)  
 浏览器效果展示


![在这里插入图片描述](https://img-blog.csdnimg.cn/797b96dd9508444fb890723e1b512a50.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ICB5biI5aW95oiR5piv5aSn55m9,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)


#### v-bind绑定class属性


![在这里插入图片描述](https://img-blog.csdnimg.cn/11043bcabd864a1589affe06fc5194dd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ICB5biI5aW95oiR5piv5aSn55m9,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)  
 浏览器页面展示：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d192b4d5d519413ab49da5cc553870c0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ICB5biI5aW95oiR5piv5aSn55m9,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)


我们使用数组的pop()和push()方法去操作数组元素，而不是使用`this.cssArray[1] = 'red'`直接操作数组。因为这种**通过下标操作数组的方式不是响应式的，也就是说虽然数组元素的值会发生变化，但不会导致页面颜色发生切换**。


所以，当我们希望通过操作数据影响页面显示内容及显示效果的时候，要使用数组相关的函数，不能直接使用数组下标操作数据。下面列举一下经常用到的响应式的数组操作函数：


* push(param…) 加入元素到数组的尾部
* pop() 从数组的尾部弹出一个元素
* shift() 从数组的头部移除一个元素
* unshift(param…) 加入元素到数组的头部
* splice() 可以实现指定下标的数组元素的删除、插入、替换
* sort() 数组排序
* reverse() 数组倒序排序



### 最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。



![](https://img-blog.csdnimg.cn/img_convert/54a6b04f29167333b139d2753f60db9f.png)
加入社区》https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0