表单和$listener
作者:互联网
v-model: 双向数据绑定语法糖:1.input标签的值根据data里的name确定,所以用:value='name', 2.input标签的值变化,会修改name值,用input事件
<template> <div class="son-container"> name: <!-- <input type="text" :value="name" @input="name = $event.target.value" placeholder="请输入名字" /> --> <input type="text" v-model="name" placeholder="请输入名字" /> <button @click="changename">changename</button> </div> </template><script> export default { data() { return { name: '', }; }, methods: { changename() { this.name = '张三'; }, }, watch: { name(val) { console.log(val); }, }, }; </script>
单选框 /复选框: :在<input>上写v-model, v-model的值等于value,就会选中;
<p> sex: <input type="radio" v-model="sex" value="man" /> <input type="radio" v-model="sex" value="femal" /> </p> <p> 爱好: <input type="checkbox" v-model="loves" value="football" />football <input type="checkbox" v-model="loves" value="basketball" />basketball <input type="checkbox" v-model="loves" value="pingpang" />pingpang </p>
loves是数组
选择框: 单选复选都写在select上;
<p> 家乡: <select name="province" v-model="provice"> <option disabled value="">请选择家乡</option> <option value="北京">北京</option> <option value="天津">天津</option> <option value="河北">河北</option> </select> </p> <p> 家乡: <select name="provinces" v-model="loveProvices" multiple> <option disabled value="">请选择喜欢的城市</option> <option value="北京">北京</option> <option value="天津">天津</option> <option value="河北">河北</option> </select> </p>
provinces是数组;
$listeners: 父组件传给子组件的事件函数;
//父组件中 <template> <div class="father-container"> <Son @submit='sendMessage' /> </div> </template>
子组件中的$listeners就是submit,可以在子组件中调用父组件的这个函数。
这个函数也可以用props传值传过来,
也可以用$emit来触发。
v-model修饰符:
- .numver
- .lazy
- .trim
标签:name,value,表单,listener,changename,组件,input,model 来源: https://www.cnblogs.com/dangdanghepingping/p/14819937.html