学习vue笔记（3）

最新推荐文章于 2023-09-07 11:28:11 发布

明月挽我心

最新推荐文章于 2023-09-07 11:28:11 发布

阅读量612

点赞数 5

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

本文链接：https://blog.youkuaiyun.com/xxxxxii/article/details/117001511

版权

前端专栏收录该内容

26 篇文章

订阅专栏

v-model的使用

作用：vue中使用v-model指令来实现表单元素和数据的双向绑定。

实际效果：
在这里插入图片描述

通过v-model实现了双向的绑定，插入到DOM中，所以DOM会发生相应的改变。

原理：v-model是一个语法糖，本质上其实是两个操作：

1.v-bind绑定一个value属性；

2.v-on指令给当前元素绑定input事件。

<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

一、v-model结合radio类型

radio对象：radio 对象代表 HTML 表单中的单选按钮。

1.点击男时，相对应的{{h2}}标签里也显示男：

在这里插入图片描述

2.点击女时，相对应的{{h2}}标签里也显示女：

在这里插入图片描述
源码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <label for="male">
    <input type="radio" id="male" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" value="女" v-model="sex">女
  </label>
  <h2>{{sex}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好",
      sex:'男'
    }
  })
</script>

</body>
</html>

二、v-model结合checkbox类型

checkbox：定义复选框，允许用户在一定数目的选择中选取一个或多个选项。

1.单个勾选框：（v-model即为布尔值，此时input的value不影响value的值）同意协议时，只有当勾选结果为true时，可以进行下一步；为false时不能进行下一步：

在这里插入图片描述

2.多个复选框：（当多个复选框时，因为可以选中多个，所以对应的data中的属性是一个数组，当选中某一个时，就会将input的value添加到数组中）点击多个复选框时，可以将选择的内容添加到图中所特写的数组中，实现双向绑定：

在这里插入图片描述

源码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
  </label>
  <h2>{{isAgree}}</h2>
  <button :disabled="!isAgree">下一步</button>
  <label for="">
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
    <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  </label>
  <h2>您的爱好是:{{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好",
      isAgree:false,
      hobbies:[]
    }
  })
</script>

</body>
</html>

三、v-model结合select类型

select：select元素可创建单选或多选菜单。

1.单选：（v-model绑定的是一个值，当选中options中的一个时，会将它对应的value赋值到myselect中）选择一个水果时：在下拉菜单中选择水果，{{h2}}标签显示相对应的水果

在里插入图片描述

2.多选：（v-model绑定的是一个数组，选中多个值时，会将选中的options对应的value添加到数组myselect中）选择多个水果时：按住ctrl选择多个水果，{{h2}}标签将对应的水果显示在数组中

在这里插入图片描述
源码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
<!--  1.选择一个-->
  <select name="abc" id="" v-model="fruit">
    <option value="苹果" >苹果</option>
    <option value="香蕉" >香蕉</option>
    <option value="榴莲" >榴莲</option>
    <option value="葡萄" >葡萄</option>
  </select>
  <h2>您选择的水果是:{{fruit}}</h2>

  <!--  2.选择多个-->
  <select name="abc" id="" v-model="fruits" multiple>
    <option value="苹果" >苹果</option>
    <option value="香蕉" >香蕉</option>
    <option value="榴莲" >榴莲</option>
    <option value="葡萄" >葡萄</option>
  </select>
  <h2>您选择的水果是:{{fruits}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好",
      fruit:'香蕉',
      fruits:[]
    }
  })
</script>

</body>
</html>

四、v-model修饰符的使用

1.lazy修饰符

lazy修饰符添加后，标签中的结果不会立即随着输入的改变而改变，而是数据失去焦点或者回车才会更新。

2.number修饰符

number修饰符可以让在输入框中输入的内容自动转成数字类型。

3.trim修饰符

trim修饰符可以过滤内容左右两边的空格。