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绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vant/vue跨域请求解决方案,需要的朋友可以参考下2022-12-12
本文主要介绍了以element-ui基础封装大文件上传的组件,包括断点续传,秒传,上传进度条,封装思想逻辑来源于el-upload 组件源码,文中有具体案例分享,需要的朋友可以参考下2024-01-01
vue2响应式原理之Object.defineProperty()方法的使用
这篇文章主要介绍了vue2响应式原理之Object.defineProperty()方法的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
Vue是一个以数据驱动、组件化的前端框架,其中组件化是Vue中较为重要的概念之一,组件之间的通信则成为Vue中较为普遍的需求,下面这篇文章主要给大家介绍了关于vue父子组件传值不能实时更新的解决方法,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue框架实现将侧边栏完全隐藏，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
下面小编就为大家分享一篇使用vue中的v-for遍历二维数组的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Vue3+Element-plus项目自动导入报错的解决方案
vue3出来一段时间了,element也更新了版本去兼容vue3,下面这篇文章主要给大家介绍了关于Vue3+Element-plus项目自动导入报错的解决方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
前几天朋友在做vue项目开发时，有人反映 IOS 上面的滑动点击有点问题，让我们来帮忙解决，于是我就重写了代码，下面把vue仿qq左滑删除组件功能分享到脚本之家平台，需要的朋友参考下吧2018-03-03
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
这篇文章主要介绍了详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
今天小编就为大家分享一篇vue设置动态请求地址的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论