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语句可以不以;结尾的烦恼
Mar 08 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
详解ECMAScript typeof用法
Jul 25 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 Javascript
关于layui时间回显问题的解决方法
Sep 24 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
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
python如何使用腾讯云发送短信
2020/09/17 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
轻化专业学生实习自我鉴定
2013/09/20 职场文书
关于礼仪的演讲稿
2014/01/04 职场文书
招商专员岗位职责
2014/02/08 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL