Vue - 姓名案例

最新推荐文章于 2023-02-21 17:57:33 发布

鬼鬼骑士

最新推荐文章于 2023-02-21 17:57:33 发布

阅读量482

点赞数

分类专栏：笔记成长阶段 Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_39123467/article/details/127290583

版权

笔记同时被 3 个专栏收录

324 篇文章 9 订阅

订阅专栏

成长阶段

272 篇文章 4 订阅

订阅专栏

Vue

18 篇文章 0 订阅

订阅专栏

文章目录

methods实现
- 源码
- 测试演示
计算属性实现

methods实现

源码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script type="text/javascript" src="../js/vue.js"></script>
		<title>Document</title>
	</head>
	<body>
		<div id="root">
			姓: <input type="text" v-model="firstName" /> 名:
			<input type="text" v-model="lastName" /> 姓名:
			<!-- <span>{{firstName.slice(0,3)}}-{{lastName.slice(0,10)}}</span> -->
			<span>{{fullName()}}</span>
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止vue在启动时生成生产提示

		new Vue({
			el: '#root',
			data: {
				firstName: '张',
				lastName: '三',
			},
			methods: {
				fullName() {
					console.log('@---')
					return (
						this.firstName.slice(0, 3) +
						'-' +
						this.lastName.slice(0, 10)
					)
				},
			},
		})
	</script>
</html>

测试演示

在这里插入图片描述

计算属性实现

源码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script type="text/javascript" src="../js/vue.js"></script>
		<title>Document</title>
	</head>
	<body>
		<div id="root">
			姓: <input type="text" v-model="firstName" /> 名:
			<input type="text" v-model="lastName" /> 姓名:
			<span>{{fullName}}</span><br /><br />
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止vue在启动时生成生产提示

		const vm = new Vue({
			el: '#root',
			data: {
				firstName: '张',
				lastName: '三',
			},
			computed: {
				fullName: {
					//当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
					//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时
					get() {
						console.log('get被调用')
						// 这里的this指的是vm
						return this.firstName + '-' + this.lastName
					},
					//get什么时候调用？当fullName被修改时
					set(value) {
						console.log('set', value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					},
				},
			},
		})
	</script>
</html>

测试演示

在这里插入图片描述

讲师笔记

在这里插入图片描述

计算属性（简写源码）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script type="text/javascript" src="../js/vue.js"></script>
		<title>Document</title>
	</head>
	<body>
		<div id="root">
			姓: <input type="text" v-model="firstName" /> 名:
			<input type="text" v-model="lastName" /> 姓名:
			<span>{{fullName}}</span><br /><br />
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止vue在启动时生成生产提示

		const vm = new Vue({
			el: '#root',
			data: {
				firstName: '张',
				lastName: '三',
			},
			computed: {
				// fullName: {
				// 	get() {
				// 		console.log('get被调用')
				// 		// 这里的this指的是vm
				// 		return this.firstName + '-' + this.lastName
				// 	},
				// 	set(value) {
				// 		console.log('set', value)
				// 		const arr = value.split('-')
				// 		this.firstName = arr[0]
				// 		this.lastName = arr[1]
				// 	},
				// },
				fullName() {
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				},
			},
		})
	</script>
</html>