首页 > 其他分享 >Vue-计算属性

Vue-计算属性

时间:2022-09-05 23:35:00浏览次数:56  
标签:Vue computed getAge getFullYear 计算 birth new 属性

计算属性

  把computed中的方法当做属性使用,会返回一个数据供使用

<div id="app">
			<p>{{msg}}</p>
			<p>方法获取的年龄:{{getAge()}}</p>
			<p>计算属性获取的年龄:{{getAge_computed}}</p>
			<button @click="change">改变birth的值看看年龄变不变</button>
		</div>
new Vue({
				el: "#app",
				data: {
					msg: "hello",
					birth: "1995-02-03"
				},
				methods: {
					getAge() {
						var age = new Date().getFullYear() - new Date(this.birth).getFullYear()
						return age + "岁"
					},
					change() {
						this.birth = "1996-02-03"
					}
				},
				computed:{
                   //计算属性第一种用法
					getAge_computed(){
						var age = new Date().getFullYear() - new Date(this.birth).getFullYear()
						return age + "岁"
					}
					//计算属性第二种用法
					xx:{
						set(oldvalue){},
						get(){}
					}
				}
			})

  

标签:Vue,computed,getAge,getFullYear,计算,birth,new,属性
From: https://www.cnblogs.com/forever-ljf/p/16660061.html

相关文章

  • vue3+ts 为原型上添加属性声明
    背景比如在vue2的情况下我们有的时候需要为Vue的原型对象上添加属性或方法,vue3的情况下需要为app挂载全局属性配置,但是结合了ts后,在vue文件中会报警告,但是程序可以正常被......
  • Vue-双向数据绑定
    双向数据绑定的源代码<body> <divid="app"> <p>{{data1}}</p> <inputname=""id="":value="data1"@input="fn"> </div> </body> <script> newVue({ ......
  • 计算机网络(一)概述
    计算机网络在信息时代中的应用Internet是全球最大最重要的计算机网络中文译名互联网、因特网。注意互联网≠互连网互联网的两个重要基本特点连通性和资源共享互联网概......
  • Vue(2)函数初识,与computed的使用
    序在实例vue对象时候,可以选择使用computed来完成计算,mvvm是mode,view,viewmode实现数据的双向绑定,这也体现其的便捷性。示例代码点击查看代码<divid="app"> <inpu......
  • 选择器与属性和浮动,定位(3)
    分组与嵌套#多个选择器可以并列公用一套css样式div,p,span{}#不同选择器之间也可以混合使用.c1,#d1>span{}伪类选择器a:link{}#访问之前状态a:hover{}......
  • 百万奖池角逐,华为云IoT边缘带你看懂“边缘计算开发者大赛”
    摘要:2022年9月1日,第二届边缘计算开发者大赛正式启动。2022年9月1日,第二届边缘计算开发者大赛正式启动!本届大赛由华为云参与承办,中国信息通信研究院、工业互联网产业联盟......
  • 前端js vue的语音播报
    目前h5新增一个文字转语音的功能(但是正在完善中,勉强能用),h5新增的SpeechSynthesisUtterance实例首先new一个SpeechSynthesisUtterance对象使用实例对象的一些属性,包括......
  • vue 通过URL直接下载PDF文件而不是预览
    项目需求:用户在点击下载时下载文件。该项目为前后端分离项目,download不起作用。我在做这个功能点时使用的方法是直接window.location.href=url可在测试时却发现word等......
  • vue3之composition-api的使用(包含watch watchEffect)
    是什么composition-api官方介绍vue2:options-api,组件按照选项组织,就是将组件各个部分严格写在methods、computed、watch、data等等里面(特定的区域写特定的代码);vue3:co......
  • IOS系统vue2, 点击返回上一页,页面空白无报错
    最近移了个项目,把页面所有的东西都移过来了,但是出现了这个问题,就是ios系统,咨询列表正常,详情页也没问题,返回上一页之后页面空白,接口请求了,也没报错,用的是gohistory(-1)的返......