Vue3v-model 实现对表单元素的双向绑定

今天的接口写完了吗？

已于 2023-12-11 20:38:28 修改

阅读量434

点赞数 8

分类专栏： Vue3 文章标签：前端 javascript vue.js

于 2023-12-11 19:33:57 首次发布

本文链接：https://blog.csdn.net/qq_65142821/article/details/134934422

版权

Vue3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、题目

使用v-model指令对表单元素实现双向绑定

二、代码及思路

（1）首先在setup里搜索框的属性和点击搜索的方法，以及下方定义的数据。

 setup() {
    //1. 
    const search = ref("");
    const checked = () => {
      console.log(search.value);
    };
    //定义一些热门搜索关键字来支撑数据
    const arr = ref(["小米", "华为", "比亚迪", "宁德时代"]);
    // 为了实现双向绑定 下方的内容要和输入框实现绑定

    return {
      search,
      checked,
      arr,
    };
  },

(2)然后在template标签里使用@click绑定点击事件使用 v-for 遍历下方展示的数据的数组，使用

v-model 在表单元素上进行双向绑定。

<template>
  <input type="text" v-model="search" />
  <button @click="checked">搜索</button>
  <div>
    热搜：
    <!--  点击数据 会把数组的值传给输入框 -->
    <span @click="search = arr" style="margin-right: 10px" v-for="arr in arr">{{
      arr
    }}</span>
  </div>
</template>

(3) 完整代码

<script>
import { ref } from "vue";
export default {
  setup() {
    //1.
    const search = ref("bg");
    //2.定义一个保存性别的属性
    const sex = ref("");
    //3 定义一个保存爱好的数组
    const hobbys = ref([]);
    //4 定义一个保存单选框的属性
    const city = ref("");
    const checked = () => {
      console.log(search.value);
    };
    //定义一些热门搜索关键字来支撑数据
    const arr = ref(["小米", "华为", "比亚迪", "宁德时代"]);
    // 为了实现双向绑定 下方的内容要和输入框实现绑定

    return {
      search,
      checked,
      arr,
      sex,
      hobbys,
      city,
    };
  },
};
</script>
<template>
  <input type="text" v-model="search" />
  <button @click="checked">搜索</button>
  <div>
    热搜：
    <!--  点击数据 会把数组的值传给输入框 -->
    <span @click="search = arr" style="margin-right: 10px" v-for="arr in arr">{{
      arr
    }}</span>
    <hr />
    <span>
      性别：<input type="radio" name="sex" v-model="sex" value="man" />男
      <input type="radio" name="sex" v-model="sex" value="women" />女
    </span>
    <hr />
    <span>
      <input type="checkbox" value="singer" v-model="hobbys" />唱
      <input type="checkbox" value="jump" v-model="hobbys" />跳
      <input type="checkbox" value="rapper" v-model="hobbys" />rap
    </span>
    <hr />
    <span>
      爱好：
      <select v-model="city">
        <option value="bg">北京</option>
        <option value="sh">上海</option>
        <option value="tj">天津</option>
      </select>
    </span>
  </div>
</template>