v-model结合select类型使用

select同样分为单选与多选

1.选择单个

 

此法非常不常用

注意v-model写在select标签内，而非option标签内

<div id="app">
<!--  1.单选框-->
  <select name="abc" id="" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="葡萄">葡萄</option>
    <option value="榴莲">榴莲</option>
    <option value="哈密瓜">哈密瓜</option>
  </select>
  <h2>您最喜欢的水果是：{{fruit}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data://注意此处的花括号
        {
          message:"这是一个vue模板",
          fruit:"苹果"
        }
  })
</script>

2.选择多个

 

需要添加multiple才能让单选变为多选

按住ctrl多选

<select name="abc" id="" v-model="fruits" multiple>

<!--  2.选择多个-->
  <select name="abc" id="" v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <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:"这是一个vue模板",
          fruit:"苹果",
          fruits:[]
        }
  })
</script>