准备步骤如同第一天
代码：（测试注意事项：js中的代码依次开启测试，不可全部开启，会报错）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
</head>
<body>
<!--v-model 实现双向数据绑定-->
<div id="app1">
<p>input元素：</p>
<input v-model="message" placeholder="测试V-Model">
<p>消息是：{{message}}</p>
<p>text元素：</p>
<p style="white-space: pre">{{message2}}</p>
<textarea v-model="message2" placeholder="测试Text"></textarea>
</div>
<br>
<!--复选框的双向数据绑定-->
<div id="app2">
<p>单个复选框</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>多个复选框</p>
<input type="checkbox" id="ceshi1" value="ceshi1" v-model="checkedNames">
<label for="ceshi1">测试一下</label>
<input type="checkbox" id="ceshi2" value="ceshi2" v-model="checkedNames">
<label for="ceshi2">测试俩下</label>
<input type="checkbox" id="ceshi3" value="ceshi3" v-model="checkedNames">
<label for="ceshi3">测试三下</label>
<br>
<span>选择的值为：{{checkedNames}}</span>
</div>
<br>
<!--单选按钮的双向数据绑定-->
<div id="app3">
<p>单选框</p>
<input type="radio" id="checkbox2" value="checkbox2" v-model="picked">
<label for="checkbox2">测试一下</label>
<br>
<input type="radio" id="checkbox3" value="checkbox3" v-model="picked">
<label for="checkbox3">测试俩下</label>
<br>
<span>选中的值为：{{picked}}</span>
</div>
<br>
<!--下拉列表的双向数据绑定-->
<div id="app4">
<select v-model="selected" name="ceshi">
<option value="">选择网站</option>
<option value="www.ceshi1.com">测试 一下</option>
<option value="www.ceshi2.com">测试俩下</option>
</select>
<div id="output">
选择的网站是：{{selected}}
</div>
</div>
<br>
<!--修饰符-->
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg">
<!--自动将用户的输入值转为 Number 类型-->
<input v-model.number="age" type="number">
<!--自动过滤用户输入的首尾空格-->
<input v-model.trim="msg">
<br>
<!--全选-->
<div id="app5">
<p>
全选：
</p>
<input type="checkbox" id="checkbox4" v-model="checked" @change="changeAllChecked()">
<label for="checkbox">
{{checked}}
</label>
<p>
多个复选框：
</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">
Runoob
</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">
Google
</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">
taobao
</label>
<br>
<span>
选择的值为:{{checkedNames}}
</span>
</div>
</body>
<script>
/*v-model 实现双向数据绑定*/
/* new Vue({
el:'#app1',
data:{
message:'ceshi',
message2:'ceshi2'
}
})*/
/*复选框的双向数据绑定*/
/* new Vue({
el: '#app2',
data: {
checked: false,
checkedNames: []
}
})*/
/*复选框的双向数据绑定*/
/* new Vue({
el: '#app3',
data: {
picked: '初始为空'
}
})*/
/*下拉列表的双向数据绑定*/
/* new Vue({
el:'#app4',
data:{
selected:''
}
})*/
/*全选与取消全选*/
new Vue({
el: '#app5',
data: {
checked: false,
checkedNames: [],
checkedArr: ["Runoob", "Taobao", "Google"]
},
methods: {
changeAllChecked: function () {
if (this.checked) {
this.checkedNames = this.checkedArr
} else {
this.checkedNames = []
}
}
},
watch: {
"checkedNames": function () {
if (this.checkedNames.length == this.checkedArr.length) {
this.checked = true
} else {
this.checked = false
}
}
}
})
</script>
</html>