vue计算属性+vue中class与style绑定(推荐)


Posted in Javascript onMarch 30, 2020

vue计算属性

在模板中放入大量的逻辑会让模板过重且难以维护

计算属性下所有函数可以放到computed

vue计算属性+vue中class与style绑定(推荐)

vue计算属性+vue中class与style绑定(推荐)

class与style绑定

原始写法 v-bind:class 缩写 :class

class绑定的三种形式

vue计算属性+vue中class与style绑定(推荐)

style的三种绑定形式

vue计算属性+vue中class与style绑定(推荐)

属性值为true显示,false不显示

第一种绑定方式:

vue计算属性+vue中class与style绑定(推荐)

vue计算属性+vue中class与style绑定(推荐)

第二种绑定方式:

vue计算属性+vue中class与style绑定(推荐)

vue计算属性+vue中class与style绑定(推荐)

第三种绑定方式:

vue计算属性+vue中class与style绑定(推荐)

vue计算属性+vue中class与style绑定(推荐)

style修改

方式1:

vue计算属性+vue中class与style绑定(推荐)

vue计算属性+vue中class与style绑定(推荐)

方式2:

vue计算属性+vue中class与style绑定(推荐)

vue计算属性+vue中class与style绑定(推荐)

方式三:

vue计算属性+vue中class与style绑定(推荐)

vue计算属性+vue中class与style绑定(推荐)

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.didivm.family的值发生变化时,vm.didiFamily的值会自动更新,并且会自动同步更新DOM部分。

总结

到此这篇关于vue计算属性+vue中class与style绑定的文章就介绍到这了,更多相关vue计算属性+vue中class与style绑定内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript之大字符串的连接的StringBuffer 类
May 08 Javascript
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
Javascript计算时间差的函数分享
Jul 04 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 #Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 #Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 #Javascript
JS中FormData类实现文件上传
Mar 27 #Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 #Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 #jQuery
开发Node CLI构建微信小程序脚手架的示例
Mar 27 #Javascript
You might like
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
搭建vue开发环境
2018/07/19 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
一看就懂得Python的math模块
2018/10/21 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
RetroStage德国:复古服装
2019/02/03 全球购物
设计师大码女装:11 Honoré
2020/05/03 全球购物
三个Unix的命令面试题
2015/04/12 面试题
创新比赛获奖感言
2014/02/13 职场文书
应用数学专业求职信
2014/03/14 职场文书
离婚被告代理词
2015/05/23 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技