vue计算属性+vue中class与style绑定(推荐)
更新时间：2020年03月30日 08:42:26 作者：陈莺莺呀
这篇文章主要介绍了vue计算属性+vue中class与style绑定,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue计算属性
在模板中放入大量的逻辑会让模板过重且难以维护
计算属性下所有函数可以放到computed中
class与style绑定
原始写法 v-bind:class 缩写 :class
class绑定的三种形式
style的三种绑定形式
属性值为true显示，false不显示
第一种绑定方式：
第二种绑定方式：
第三种绑定方式：
style修改
方式1：
方式2：
方式三：
ps：下面通过代码介绍下计算属性
计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步自动更新。
代码如下:
<div id="example">
<input type="text" v-model="didi">
<input type="text" v-model="family">
<br>
didi={{didi}},family={{family}},didiFamily={{didiFamily}}
</div>
var vm = new Vue({
el:'#example',
data:{
didi:'didi',
family:'family'
},
computed:{
<!-- 一个计算属性的getter -->
didiFamily:function(){
<!-- this指向vm实例 -->
return this.didi+this.family
}
}
})
当vm.didi和vm.family的值发生变化时，vm.didiFamily的值会自动更新，并且会自动同步更新DOM部分。
总结
到此这篇关于vue计算属性+vue中class与style绑定的文章就介绍到这了,更多相关vue计算属性+vue中class与style绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了Vue打包优化之生产环境删除console日志配置详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
好用的用户引导插件有 intro.js 和 driver.js 两个，对比了一下，最终还是使用了driver.js，这篇文章主要介绍了vue3项目新用户引导组件(driver.js),需要的朋友可以参考下2022-08-08
vue3 v-bind="$attrs"继承组件全部属性的解决方案
这篇文章主要介绍了vue3 v-bind=“$attrs“ 继承组件全部属性的解决方案,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
这篇文章主要为大家详细介绍了最基础的vue.js双向绑定操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
今天小编就为大家分享一篇在vue中读取本地Json文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue项目打包后打开空白解决办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要为大家详细介绍了vue实现移动端返回顶部，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了vue 实现锚点功能操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
列表页面显示数据，点击跳转到对应的详情页，详情页可以添加并跳转到购物车，购物车具有常见功能，这篇文章主要介绍了vue 实现列表跳转至详情且能添加至购物车,需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了Vue左滑组件slider的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
最新评论