The v-model command can only be used on form elements such as <input>, <select>, <textarea>. The so-called two-way binding refers to the data in our vue instance in js that is consistent with the content on the dom element it renders. No matter who is changed, the other party will update to the same data accordingly.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/" charset="utf-8"></script>
<script type="text/javascript">
= function(){
var vm = new Vue({
el:'#box',
data:{
msg:'welcome vue'
}
});
}
</script>
</head>
<body>
<div >
<input type="text" v-model='msg'/>
<br />
{{msg}}
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/" charset="utf-8"></script>
<script type="text/javascript">
= function(){
var vm = new Vue({
el:'#box',
data:{
msg:'welcome vue'
}
});
}
</script>
</head>
<body>
<div >
<input type="text" v-model='msg'/>
<br />
{{msg}}
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/" charset="utf-8"></script>
<script type="text/javascript">
= function(){
var vm = new Vue({
el:'.box',
data:{
msg:'welcome vue'
}
});
}
</script>
</head>
<body>
<div class="box">
<input type="text" v-model='msg'/>
<br />
<input type="text" v-model='msg'/>
<br />
{{msg}}
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/" charset="utf-8"></script>
<script type="text/javascript">
= function(){
var vm = new Vue({
el:'.box',
data:{
msg:'welcome vue',
msg2:12,
msg3:true,
arr:['app','orange','pare']
}
});
}
</script>
</head>
<body>
<div class="box">
<input type="text" v-model='msg'/>
<br />
<input type="text" v-model='msg'/>
<br />
{{msg}}
<br />
{{msg2}}
<br />
{{msg3}}
<br />
{{arr}}
</div>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.