v-model结合select类型使用

最新推荐文章于 2024-01-22 16:53:51 发布

Eli-sun

最新推荐文章于 2024-01-22 16:53:51 发布

阅读量3.7k

点赞数 2

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

本文链接：https://blog.csdn.net/vfjcgg/article/details/106761466

版权

Vuejs 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

v-model结合select类型使用

v-model：select

和CheckBox一样，select也分单选和多选两种情况

1.单选：只能选中一个值

1.v-model绑定的是一个值
2.当我们选中option中的一个时，会将它对应的value赋值到mySelect中

选择一个

  <select name="abc"  v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="桃子">桃子</option>
    <option value="梨子">梨子</option>
  </select>
  <h2>你选择的水果是：{{fruit}}</h2>

2.多选：可以选中多个值

1.v-model绑定的是一个数组
2.当选中多个值时，就会将选中的option对应的value添加到数组mySelect中

选择多个

  <select name="abc"  v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="桃子">桃子</option>
    <option value="梨子">梨子</option>
  </select>
  <h2>你选择的水果是：{{fruits}}</h2>

栗子：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div id="app">
  <!--1.选择一个-->
  <select name="abc"  v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="桃子">桃子</option>
    <option value="梨子">梨子</option>
  </select>
  <h2>你选择的水果是：{{fruit}}</h2>


  <!--1.选择多个-->
  <select name="abc"  v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="桃子">桃子</option>
    <option value="梨子">梨子</option>
  </select>
  <h2>你选择的水果是：{{fruits}}</h2>
</div>

<script src="../vue.min.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message:'hello',
      fruit:'香蕉',
      fruits:[],
    }
  })
</script>
</body>
</html>

Eli-sun

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
v-model结合select类型使用

v-model结合select类型使用v-model：select和CheckBox一样，select也分单选和多选两种情况1.单选：只能选中一个值1.v-model绑定的是一个值2.当我们选中option中的一个时，会将它对应的value赋值到mySelect中选择一个 <select name="abc" v-model="fruit"> <option value="苹果">苹果</option> <option value=
复制链接

扫一扫