表单和$listener

时间：2021-06-02 15:50:48 阅读：0 评论：0 收藏：0 [点我收藏+]

标签：tip lov rop rip method methods -- listen 选中

v-model: 双向数据绑定语法糖：1.input标签的值根据data里的name确定，所以用:value=‘name‘, 2.input标签的值变化，会修改name值，用input事件

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>

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

多重事件传递

表单和$listener

标签：tip lov rop rip method methods -- listen 选中

原文地址：https://www.cnblogs.com/dangdanghepingping/p/14825534.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行