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 相关文章推荐
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
详解vue中axios的封装
Jul 18 Javascript
vue实现按钮切换图片
Jan 20 Vue.js
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 反射机制实现动态代理的代码
2008/10/22 PHP
php array_search() 函数使用
2010/04/13 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
php创建无限级树型菜单
2015/11/05 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
jquery实现拖动效果
2016/08/10 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
Win10下Python环境搭建与配置教程
2016/11/18 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
详解Python设计模式之策略模式
2020/06/15 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
介绍一下RMI的基本概念
2016/12/17 面试题
实习会计求职自荐信范文
2014/03/10 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书