Vue之v-model的使用

最新推荐文章于 2023-08-10 09:34:48 发布

U_yong

最新推荐文章于 2023-08-10 09:34:48 发布

阅读量363

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_44756582/article/details/106736780

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue之v-model的使用

个人博客

https://www.boycharse.top

Vue系列

上一篇：05-Vue的条件判断和循环遍历
下一篇：暂无

v-model的使用

如何获取用户在表单中输入的数据呢？比如下面这样子的一个场景：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input type="text" />
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {},
    });
  </script>
</html>

在这里插入图片描述
我们想获取用户在输入框中的数据，这时候我们可以用v-model

v-model的基本使用

我们可以在data中创建一个message属性，用来接收用户的输入：

    const app = new Vue({
      el: "#app",
      data: {
        message: "",
      },
    });

同时，使用v-model将message绑定到表单中

<input type="text" v-model="message"/>

完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="message"/>
      {{message}}
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "",
      },
    });
  </script>
</html>

运行结果：
在这里插入图片描述
我们可以看到，message随着用户的输入而改变。

v-model与radio的示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input type="radio" v-model="sex" value="男" />男
      <input type="radio" v-model="sex" value="女" />女
      <div>{{sex}}</div>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        sex: "",
      },
    });
  </script>
</html>

这里我们用sex来接收用户的选择，如果用户选择了男，则sex会变成男。用户选择了女，则sex会变成女。
运行结果如下：
在这里插入图片描述

v-model与checkbox示例

当checkbox只有一个时：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input type="checkbox" v-model="isAgree" />同意协议 {{isAgree}}
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        isAgree: true,
      },
    });
  </script>
</html>

我们用一个bool值来接收用户是否选择这个单选框，如果为true，则是选中，否则，是未选中
运行结果：
在这里插入图片描述

当checkbox为多个时：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>

<div id="app">
        <input type="checkbox" value="apple" v-model="selectList">apple</input>
        <input type="checkbox" value="banana" v-model="selectList">banana</input>
        <input type="checkbox" value="camera" v-model="selectList">camera</input>
        <input type="checkbox" value="phote" v-model="selectList">photo</input>
        <input type="checkbox" value="table" v-model="selectList">table</input>
        {{selectList}}
    </div>
    
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    
    const app = new Vue({
      el: "#app",
      data: {
        selectList: [],
      },
    });

  </script>
</html>

这里我们用一个数组来接收用户的选择，运行结果如下：
在这里插入图片描述

v-model结合checkbox和v-for示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <span v-for="(item,index) in movies">
        <input type="checkbox" :value="item" v-model="selectList" />
        {{item}}
      </span>

      {{selectList}}
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        movies: ["星球大战", "复仇者联盟", "美国队长", "花木兰"],
        selectList: [],
      },
    });
  </script>
</html>

这里我们使用v-for去动态生成checkbox，而不是用写死的方法
运行结果：
在这里插入图片描述

U_yong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue之v-model的使用

Vue之v-model的使用个人博客https://www.boycharse.topVue系列上一篇：05-Vue的条件判断和循环遍历下一篇：暂无v-model的使用如何获取用户在表单中输入的数据呢？比如下面这样子的一个场景：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="w
复制链接

扫一扫

专栏目录