vue学习之计算、监视

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>菜鸟教程(runoob.com)</title><script src="vue.js" type="text/javascript" charset="utf-8"></script>&

想要飞翔的企鹅

88人浏览 · 2021-12-22 18:18:03

想要飞翔的企鹅 · 2021-12-22 18:18:03 发布

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>菜鸟教程(runoob.com)</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	    <div id="demo">
	    	姓：<input type="text" placeholder="First Name" v-model="firstname"/><br>
	    	名：<input type="text" placeholder="Last Name" v-model="lastname"> <br>
	    	姓名1(单向)：<input type="text" placeholder="Full Name1" v-model="fullName1" /><br>
	    	姓名2(单向)：<input type="text" placeholder="Full Name2" v-model="fullName2" > <br>
	    	姓名3(双向)：<input type="text" placeholder="Full Name3"> <br/>
	    </div>
		<script type="text/javascript">
			const vm = new Vue({ 
			    el: '#demo',
			    data: {
			    	firstname: 'A',
			    	lastname: 'B',
			    	fullName2:'A B'
			    },
			   computed:{
			   	 //什么时候执行: 初始化显示/相关的data属性数据发生改变
			     fullName1 () { //计算属性中的一个方法，方法的返回值作为属性
			     	return this.firstname+' '+this.lastname
			     }
			   },
			   watch:{//配置监视
			   	 firstname: function (v){//first发生了变化
			   	   this.fullName2 = v+ ' '+this.lastname 
			   	 }
			   },
//			  
		  })  
		   vm.$watch('lastname', function(value){//这个是对实体的一个监视通过里边的函数实现
		   		//更新fullName2
			   	this.fullName2 = this.firstname+' '+value
		   })
		</script>
	</body>
</html>

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

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}$/, //不连续的两位字母// /^