<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p>{{message}}</p>
<input type="text" name="#" v-model="message" placeholder="请填写"> //意思是把message和input的value绑定。
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
message:'hello caicai'
}
})
</script>
</html>
//二次视频学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> v-model实例</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>原始文本信息：{{message}}</p>
<h3>文本框：</h3>
<p>v-model:<input type="text" name="#" v-model="message"></p> <!--实现双向数据绑定-->
<p>v-model.lazy:<input type="text" name="#" v-model.lazy="message"></p> <!--修饰符 .lazy 是光标离开后数据同步-->
<p>v-model.number:<input type="text" name="#" v-model.number="message"></p> <!--绑定数据为数字,开始输入的为数字，后面再输入字符串 字符串不显示。只有开始输入字符串，后面才能输入进去字符串-->
<p>v-model.trim:<input type="text" name="#" v-model.trim="message"></p> <!--加空格失灵-->
<hr>
<h3>文本域</h3>
<textarea v-model="message"></textarea>
<hr>
<h3>多选框绑定一个值</h3>
<input type="checkbox" name="" id="check" v-model="isTrue">
<label for="check">{{isTrue}}</label>
<hr>
<h3>多选框绑定数组</h3>
<p>
<input type="checkbox" name="" value="jinsuo" id="jinsuo" v-model="checkName"><label for="jinsuo">jinsuo</label>
<input type="checkbox" name="" value="caicai" id="caicai" v-model="checkName"><label for="caicai">caicai</label>
<input type="checkbox" name="" value="liyuan" id="liyuan" v-model="checkName"><label for="liyuan">liyuan</label>
<p>{{checkName}}</p>
</p>
<hr>
<p>
<input type="radio" value="男" id="man" v-model="sex"><label for="man">男</label>
<input type="radio" value="女" id="women" v-model="sex"><label for="women">女</label>
<p>您的性别是：{{sex}}</p>
</p>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
message:"hello hello",
isTrue:false,
checkName:[],
sex:false,
}
})
</script>
</html>