vue-名称拼接

最新推荐文章于 2023-05-28 10:38:34 发布

qq_38504352

最新推荐文章于 2023-05-28 10:38:34 发布

阅读量618

点赞数

本文链接：https://blog.csdn.net/qq_38504352/article/details/104292615

版权

基本知识点：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>组建组件的方式</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<!--
				分析：如果firstName和lastName被修改时，同步修改fullName
				
			-->
			<input type="text" v-model="firstName" @keyup="handlerFullName"/>
			<input type="text" v-model="lastName" @keyup="handlerFullName"/>
			<input type="text" v-model="fullName"/>
		</div>

		<script type="text/javascript">
			var vue =new Vue({
				el:"#app",
				data:{
					firstName:'',
					lastName:'',
					fullName:''
				},
				//第一种方式，给前两个表单加上键盘抬起事件，当触发事件时，拼接两个name为fullName赋值
				methods:{
					handlerFullName(){
						 this.fullName=this.firstName+this.lastName
					}
				},
				filters:{
					
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>组建组件的方式</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<!--
				分析：如果firstName和lastName被修改时，同步修改fullName
				
			-->
			<input type="text" v-model="firstName" />
			<input type="text" v-model="lastName" />
			<input type="text" v-model="fullName"/>
		</div>

		<script type="text/javascript">
			var vue =new Vue({
				el:"#app",
				data:{
					firstName:'',
					lastName:'',
					fullName:''
				},
				//第一种方式，给前两个表单加上键盘抬起事件，当触发事件时，拼接两个name为fullName赋值
				methods:{
					handlerFullName(){
						 this.fullName=this.firstName+this.lastName
					}
				},
				filters:{
					
				},
				watch:{//监听器，可以监听某个属性，不需要去监听用户的操作，使开发者只关注model，不关注view
					'firstName':function(newVal,oldVal){
						this.fullName=newVal+this.lastName
					},
					'lastName':function(newVal,oldVal){
						this.fullName=newVal+this.firstName
					}
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>组建组件的方式</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<!--
				分析：如果firstName和lastName被修改时，同步修改fullName
				
			-->
			<input type="text" v-model="num1" />*0.8
			+
			<input type="text" v-model="num2" />*0.2
			=
			<input type="text" v-model="sumNumber"/>
		</div>

		<script type="text/javascript">
			var vue =new Vue({
				el:"#app",
				data:{
					num1:0,
					num2:0
				},
				computed:{//计算属性，在computed可以定义属性，这些属性叫做计算属性，计算属性本质就是一个方法，但是当我们使用的时候，是作为属性去使用
					//注意：计算属性调用 的时候一定不要加括号，他就是个属性，用法和data一摸一样
					//只要计算属性计算到的所有data属性发生变化的时候 ，就会重新计算属性的值
					//计算属性的结果会被缓存起来，会被下次直接调用，如果计算属性用到的data都没有发生变化，就不会对属性重新求值
					//计算属性的get方法和set方法
					sumNumber(){
						get(){//当用于获取计算属性值的时候，调用get方法
							return parseInt(this.num1)*0.8+parseInt(this.num2)*0.2
						},
						set(val){//当修改计算属性的时候，调用set方法
							console.log(val)
						}
						
					}
				}
				
			})
		</script>
	</body>
</html>

qq_38504352

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue-名称拼接

基本知识点：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>组建组件的方式</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> &l...
复制链接

扫一扫