其他分享
首页 > 其他分享> > 表单和$listener

表单和$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修饰符:

标签:name,value,表单,listener,changename,组件,input,model
来源: https://www.cnblogs.com/dangdanghepingping/p/14819937.html