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 相关文章推荐
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
React Native验证码倒计时工具类分享
Oct 24 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
解决Nuxt使用axios跨域问题
Jul 06 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 SEO优化之URL优化方法
2011/04/21 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
python实现进程间通信简单实例
2014/07/23 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
python中嵌套函数的实操步骤
2019/02/27 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
python 进程池pool使用详解
2020/10/15 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
优秀民警事迹材料
2014/01/29 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
党员民主评议自我评价
2014/10/20 职场文书
质量整改报告范文
2014/11/08 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android