Vue3学习 day3

1.属性计算

1.什么是属性，计算属性？

• data里面是属性；
• computed里面是计算属性；根据属性计算出来的属性；当初次被读取时，会调用，返回值作为该属性的值 ； 当数据发生变化时，也会被调用； 有缓存

		<div id="app4">
			姓: <input type="text" v-model="firstName" />
			<br>
			名: <input type="text" v-model="lastName" />
			<br>
			全名：{{fullName}}  
			
		</div>

		var	vm4= new Vue({
				data: {
					firstName: 'a',
					lastName: 'b'
				},
				computed: {
					fullName: {
						//当初次被读取时，会调用，返回值作为该属性的值 ；  当数据发生变化时，也会被调用  有缓存
						get() { 
							console.log('get 被调用了')
							return this.firstName+"-"+this.lastName
						},
						set(value){
							console.log('set',value)
							const aa=value.split('-')
							this.firstName=aa[0]
							this.lastName=aa[1]	
						}
						
					},
					now:{
						get(){
							return Date.now()
						}
					}
				}
			}).$mount("#app4")

• 简写

	var vm1 = new Vue({
				data: {
					firstName: 'a',
					lastName: 'b'
				},
				computed: {
					fullName: function() {
						console.log('get 被调用了')
						return this.firstName + "-" + this.lastName
					}
				}
			}).$mount("#app1")

2.列表渲染

1.基础使用

	<div id="app1">
			<ul>
			  <li v-for="(person,index) in personlist" :key="index">
				  {{person.name}}-{{person.age}}---索引值：{{index}}
			  </li>
			</ul>
			
			
			<ul>
			  <li v-for="(person,index) in 5" :key="index">
				  {{person}}-{{person}}---索引值：{{index}}
			  </li>
			</ul>
		</div>

		
		<script type="text/javascript">
			new Vue({
				data:{
				  personlist:[
					{id:'001',name:'zhangsan',age:12},
					{id:'002',name:'lisi',age:13},
					{id:'003',name:'wangwu',age:15}
				  ]	
				}
			}).$mount("#app1")

2.列表排序

3.收集表单数据

		<div id="app2">
			<form action="" method=""  @submit.prevent="demo" >
				<label for="account" >账户：</label> <input type="text" name="" id="account" value="" v-model.trim="userInfo.account" /><br>
				
				密码： <input type="password" name="" id="password" value="" v-model="userInfo.password" /><br>
				
				年龄： <input type="number" name="" id="age" value="" v-model.number="userInfo.age" /><br>
				
				性别：<br>
				男<input type="radio" name="sex" id="man" value="man" v-model="userInfo.sex"/>
				女<input type="radio" name="sex" id="woman" value="woman"  v-model="userInfo.sex"/><br>
				
				爱好：<br>
				学习<input type="checkbox" name="" id="study" value="study"  v-model="userInfo.hobby"/>
				游戏<input type="checkbox" name="" id="game" value="game" v-model="userInfo.hobby"/>
				音乐<input type="checkbox" name="" id="music" value="music" v-model="userInfo.hobby"/>
				
				<br>
				
				所属地：

				<select v-model="userInfo.city">
					<option value ="">请选择校区</option>
					<option value ="bj">北京</option>
					<option value ="sh">上海</option>
					<option value ="gz">广州</option>
					<option value ="sz">深圳</option>
				</select>
				
				<br>
				其他信息:
				<textarea  v-model.lazy="userInfo.other" rows="" cols=""></textarea>    //失去焦点 才搜集
				<br>
				
				<input v-model="userInfo.agree" type="checkbox" name="" id="" value="" />阅读并接收 <a href="https://www.baidu.com/">用户协议</a>
				
				<button  type="submit">提交</button>
				
			</form>
		</div>
		
	
		var app2=new Vue({
			data:{
				userInfo:{
					account: '',
					password:'',
					age:'',
					sex:'woman',
					hobby:[],
					city:'bj',
					other:'',
					agree:''
				}
			},
			methods:{
				demo(){
					console.log(JSON.stringify(this.userInfo))
				}
				
			}
		}).$mount("#app2")