Vue入门2

1、数据计算

JS代码：

app=new Vue({
		el:'#msgDiv',
		data:{
		numb1:0,
		numb2:0
		},
		computed:{//表示计算结果，同样可以进行数据渲染
		addnumber:function(){
		return parseInt(this.numb1)+parseInt(this.numb2)
		},
		subnumber:function(){
		return this.numb1-this.numb2
		},
		mulnumber:function(){
		return this.numb1*this.numb2
		},
		divnumber:function(){
		return this.numb1/this.numb2
		},
		modnumber:function(){
		return this.numb1%this.numb2
		}
		}
		}
		
})

HTML代码：

<div id="msgDiv" >
输入第一个数：<input type="number" v-model="numb1"/>
输入第二个数：<input type="number" v-model="numb2"/><br/>
加法结果：{{addnumber}}<br/>
减法结果：{{subnumber}}<br/>
乘法结果：{{mulnumber}}<br/>
除法结果：{{divnumber}}<br/>
求余结果：{{modnumber}}<br/>
</div>

运行结果：

2、数据获取和修改

设置方法为set、获取方法为get

JS代码：

app=new Vue({
		el:'#msgDiv',
		data:{
		firstname:"",
		lastname:"",
		},
		computed:{
		fullname:{
		get:function(){
		return this.firstname+this.lastname
		},
		set:function(inputfullname){
		this.firstname=inputfullname.slice(0,1);
		this.lastname=inputfullname.slice(1)
		}
		}
		}
});

HTML代码：

<div id="msgDiv" >
全名：<input type="text" v-model="fullname"/><br/>
姓：<input type="text" v-model="firstname"/><br/>
名：<input type="text" v-model="lastname"/>
</div>

运行结果：

3、表单控件绑定

JS代码：

app=new Vue({
		el:'#msgDiv',
		data:{
		text:"",
		sex:"男",
		name:"努力变优秀",
		lock:true,
		checkedID:3,
		message:[],
		infos:[
		{id:1,title:"学习",checked:false},
		{id:2,title:"努力",checked:false},
		{id:3,title:"加油",checked:false},
		],
		places:[
		{id:1,title:"浙江"},
		{id:2,title:"上海"},
		{id:3,title:"深圳"},
		{id:4,title:"重庆"},
		{id:5,title:"武汉"}
		],
		checkedIDs:[
		2,3
		]
		},
		computed:{
		status:{//若选定锁定按钮，则lock会为true，显示锁定，否则显示活跃
		get:function(){
		return this.lock?"锁定":"活跃"
		}
		},
		state:{//若选定全部信息的按钮被选中，则右侧的多选框均被选中
		set:function(newState){
		for(i=0;i<this.infos.length;i++)
		this.infos[i].checked=newState;
		}
		},
		check:{//单选下拉菜单的信息显示在右侧
		get:function(){
		for(i=0;i<this.places.length;i++)
		if(this.places[i].id==this.checkedID)
		return this.places[i].title
		}
		},
		checks:{//多选下拉菜单的信息显示在右侧
		get:function(){
		if(this.checkedIDs.length==0)
		 return new Array();
		var placenames=new Array(this.checkedIDs.length);
		var foot=0;
		for(j=0;j<this.checkedIDs.length;j++){
		 for(i=0;i<this.places.length;i++)
		{
		  if(this.places[i].id==this.checkedIDs[j])
		{
		  placenames[foot++]=this.places[i].title;
		}
		}
		}
		return placenames;
		}
		}
		}
	})

HTML代码：

<div id="msgDiv" >
<div style="float:left;width:50%">
<textarea placeholder="输入多行文字" rows="10" cols="50" v-model="text"></textarea><br> //文本框的绑定
<input type="radio" value="男" v-model="sex"/>男
<input type="radio" value="女" v-model="sex"/>女<br>//单选框的绑定
<input type="checkbox" value="学习" v-model="message"/>学习
<input type="checkbox" value="努力" v-model="message"/>努力
<input type="checkbox" value="加油" v-model="message"/>加油<br>//多选框的绑定
<input type="checkbox" value="锁定" v-model="lock"/>锁定<br>
<input type="checkbox" value="true" v-model="state"/>选择全部信息<br>
<span>
<select v-model="checkedID">
<option :value="place.id" v-for="place in places">
{{place.title}}
</option>
</select></span><br>
<span>
<br>
<br>
<select v-model="checkedIDs" multiple>
<option :value="place.id" v-for="place in places">
{{place.title}}
</option>
</select>
</span>
</div>
<div style="float:left;width:50%">
<p style="white-space:pre-line">{{text}}</p><br>
性别是：{{sex}}<br>
{{message}}<br>
姓名：{{name}}<br>
状态：{{status}}<br>
<span v-for="info in infos">
<input type="checkbox" :value="info.id" :checked="info.checked"/>{{info.title}}<br>
</span>
单选：<br>
城市编号：{{checkedID}}<br>
城市名称：{{check}}<br>
多选：<br>
城市编号：<br>
<span v-for="id in checkedIDs">
{{id}}<br>
</span>
城市名称：<br>
<span v-for="p in checks">
{{p}}<br>
</span>

</div>
</div>

运行结果：