提示:
VUE学习:vue基础14————表单元素的事件绑定问题
前言
本文继续学习Vue相关内容。
提示:以下是本篇文章正文内容,下面案例可供参考# 表单元素的事件绑定问题
value和v-model
value和v-model共存的情况下,文本框会显示v-model的值
v-model默认会触发input标签的input事件,checkbox和radio的时候会触发change事件
<div id="app" v-cloak>
<input type="text" value="你好,世界" v-model="msg">
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: "hello world",
},
methods: {}
});
</script>
复选框
<div id="app" v-cloak>
<input type="checkbox" v-model="cb" id="cb" name="cb" value="复选框">
<label for="cb">复选框状态:{{cb}}</label>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
cb:false,
},
methods: {}
});
</script>
复选框实例
<div id="app" v-cloak>
<div>
<span>爱好</span>
<label for="lq">篮球</label>
<input type="checkbox" name="hb" id="lq" value="篮球" v-model="hobby">
<label for="zq">足球</label>
<input type="checkbox" name="hb" id="zq" value="足球" v-model="hobby">
<label for="pq">排球</label>
<input type="checkbox" name="hb" id="pq" value="排球" v-model="hobby">
<p >您的爱好:
<b v-for="item in hobby">{{item}} </b>
</p>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
hobby:['足球'],
},
methods: {}
});
</script>
单选框
<div id="app" v-cloak>
<div>
<span>性别</span>
<label for="nan">男</label>
<input type="radio" value="男" id="nan" name="sex" v-model="sex">
<label for="nan">女</label>
<input type="radio" value="女" id="nv" name="sex" v-model="sex">
<span>您的性别是:{{sex}}</span>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
sex:'女',
},
methods: {}
});
</script>
下拉框
<div id="app" v-cloak>
<div>
<label for="powerId">权限</label>
<select name="powerId" id="powerId" v-model="powerId">
<option v-for="p in powerList" :key="p.id" :value="p.id">{{p.name}}</option>
</select>
<span v-for="p in powerList" v-if="p.id===powerId">您选择的权限是: {{p.name}}</span>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
powerList:[{id:1,name:'管理员'},{id:2,name:'运维'},{id:3,name:'客户'}],
powerId:3
},
methods: {}
});
</script>