Vue.js：数据双向绑定、计算属性Computed

学习Vue.js第四天数据双向绑定使用v-model<label>姓名：</label><input type="text" v-model="name"/><label>年龄：</label><input type="text" v-model="age"/></br>...

勤奋的树懒

30459人浏览 · 2019-07-11 14:03:10

勤奋的树懒 · 2019-07-11 14:03:10 发布

学习Vue.js第四天

数据双向绑定

使用v-model

			<label>姓名：</label>
			<input type="text" v-model="name"/>
			<label>年龄：</label>
			<input type="text" v-model="age"/></br>
			<span>你的名字叫：【{{name}}】,年龄是：【{{age}}】岁。</span>

在这里插入图片描述
计算属性Computed

没有用计算属性Computed之前如下图不管是给A加值还是给B加值它都会调用两个方法给页面加大了渲染任务.

在这里插入图片描述

用了Computed属性之后
因为是属性所以记得把numAB方法后面的括号()去掉
<p>A + Age = 【{{numA}}】</p> <p>B + Age = 【{{numB}}】</p>

全部代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Vue.js</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>

	<body>
		<div id="vue-app">
			<h3>数据双向绑定v-model</h3>
			<label>姓名：</label>
			<input type="text" v-model="name" />
			<label>年龄：</label>
			<input type="text" v-model="age" /><br/>
			<span>你的名字叫：【{{name}}】,年龄是：【{{age}}】岁。</span>
			<h3>计算属性Computed</h3>
			<label>A的值：【{{A}}】</label><button v-on:click="A++">点击加1</button>
			<label>B的值：【{{B}}】</label><button v-on:click="B++">点击加1</button><br />
			<p>A + Age = 【{{numA}}】</p>
			<p>B + Age = 【{{numB}}】</p>
		</div>
	</body>
	<script>
		new Vue({
			el: '#vue-app',
			data: {
				name: "old monster",
				age: "22",
				A: 1,
				B: 1
			},
			methods: {
				//				numA:function(){
				//					console.log("调用numA方法");
				//					return this.A+parseInt(this.age);
				//				},
				//				numB:function(){
				//					console.log("调用numB方法");
				//					return this.B+parseInt(this.age);
				//				}
			},
			computed: {
				numA: function() {
					console.log("调用numA方法");
					return this.A + parseInt(this.age);
				},
				numB: function() {
					console.log("调用numB方法");
					return this.B + parseInt(this.age);
				}
			}
		});
	</script>

</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^