<body>
<div id = 'app'>
<!-- 双向数据绑定;输入框-->
<span>span-->{{name}}</span><br>
<input type="text" v-model="name">
<input type="text" v-model="username">
<input type="text" v-model="password"><br>
<!-- 双向数据绑定;单选框-->
<span>请选择性别{{genderValue}}</span>
<input type="radio" value="1" name="gender" v-model="genderValue">男
<input type="radio" value="2" name="gender" v-model="genderValue">女<br>
<!-- 双向数据绑定;多选框-->
<span>请选择你喜欢多电影--{{movies}}</span><br>
<input type="checkbox" value="1" v-model="movies">变形金刚
<input type="checkbox" value="2" v-model="movies">复仇者联盟
<input type="checkbox" value="3" v-model="movies">飞驰人生<br>
<!-- 双向数据绑定;下拉框-->
<span>请选择你喜欢的电影：{{selectMovie}}</span><br>
<select v-model="selectMovie">
<option disabled value="">请选择</option>
<option value="变形金刚">变形金刚</option>
<option value="复仇者联盟">复仇者联盟</option>
<option value="飞驰人生">飞驰人生</option>
</select>
<!-- 双向数据绑定;动态数据源绑定-->
<span>请选择你喜欢的电影：{{selectMovie}}</span><br>
<select v-model="selectMovie">
<option v-for="option in options" :value="option.id">{{option.name}}</option>
</select><br>
<!-- 过滤器-->
<span>{{age|changeAge('dsx','真')}}</span>
<input type="button" @click="change" value="重置"><br>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
name:'dxs',
username:'',
password:'',
genderValue:2,
movies:[],
selectMovie:'',
options:[{"name":"变形金刚","id":1},{"name":"复仇者联盟","id":2},{"name":"飞驰人生","id":3}],
age:18
},
methods: {
change() {
this.name='';
this.movies=''
}
},
filters:{
changeAge(age,name,f){
if(age==18){
return name+f+'年轻'
}
}
}
})
</script>
</body>