小案例input的value拼接用vue js jq实现的区别_html value 可以拼接吗-CSDN博客

本文链接：https://blog.csdn.net/jifubu6013/article/details/79847649

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="app">
	<input type="text" v-model="message" name=""><span>{{message}}</span>
	<input type="text" v-model="message1" name=""><span>{{message1}}</span>
    <span>{{message+message1}}</span>
    </div>
    <br>
    <div>
    <input type="text" name="" id="fname">
    <input type="text" name="" id="lname">
    <span id="fullname"></span>
    </div>
    <br>
    <div>
    	<input type="text" name="" id="j_fname" >
    	<input type="text" name="" id="j_lname" >
    	<span id="j_fullname"></span>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="F:/JS/jquery-1.12.4.js"></script>
<script type="text/javascript">

	var app=new Vue({   //vue极大解放了DOM操作
		el:"#app",
		data:{
			message:'',
			message1:''
		}
	})

	
	var fname=document.getElementById("fname");
	var lname=document.getElementById("lname");
	var fullname=document.getElementById("fullname");
	fname.addEventListener('input',handler)
	lname.addEventListener('input',handler)
	function handler(){
		fullname.innerHTML=fname.value+lname.value;
	}
	

$('#j_fname').on('input',j_handler)   //jq提高了DOM操作的效率
$('#j_lname').on('input',j_handler)
function j_handler(){
	$('#j_fullname').html($('#j_fname').val()+$('#j_lname').val())

}
</script>
</body>
</html>