vuejs绑定数据到select中，选择option数据后，同步改变下面一个输入框input的值

前言：应公司开发，某小功能的需要，所以初次接触到vuejs，摸索学习中，还不熟练，只是简单分享一些公司开发中遇到的一些问题，有不足的地方欢迎留言讨论。

 

一，问题描述：

【当前页面里有一个select框 + 一个input框】

1.ajax请求后台数据，绑定到select下拉单选框中。

2.点击下拉框，选中一栏数据，同时input从没有值变成同步更新到选中的那一栏值。

3.演示效果图。

 

 

二，html+javascript全部源码：

	
		
   
   
		
		<script src="../Public/js/jquery-3.1.1.min.js"></script>
		<script src="../Public/js/vue.min.js"></script>
	
	
		
   
   

			
    
    
					{{item.fld_group_id}} {{item.fld_group_name}}
				
			
    
    
		
   
   
		
		
			<script>
				$(function(){
					var vx = new Vue({
						el: "#tbserverid",
						data: {
							//创 m建一个空数组，后面传入数据库的数据进去
							list:[],
							aaa:"",
							bbb:""
							
						},
						//此处修改成ajax请求数据，存放到list[]中
						methods:{
							getServerGroup:function() {
								var _self=this;//保存this的指向
								$.post('/bin/groups',function(res){
									if(res.data) {
										_self.list = res.data;
									}
									console.log(_self.lista);
								});
							},
							test:function() {
								this.bbb = this.aaa;
							}
						}
					});
					vx.getServerGroup();
				});
		
			</script>
	

三，源码分析：

 

 

 

四，需要用源码的人，在复制源码下去运营的时候，一定要把引入的jquery和vuejs文件改成自己本地路径，还有ajax请求的路径 /bin/groups，也要修改成自己的数据量url，谢谢阅读！