v-model: 选择列表

by edith_tang

HTML

<div id="app">

<!-- 
  选择列表，也就是下拉选择器
  
  单选的场景：
    1. v-model绑定一个String类型的数据
    2. 选中后，会优先匹配选中项的value值，如果没有value值，则会去匹配option的text。
    3. 会在初始化后忽视option本身的selected属性
    4. 当绑定的数据的初始值就是某个选项的value值时，初始化后会默认选中改选项
-->
<select v-model="selected">
  <option>《Vue.js 实战》</option>
  <option value="ES6 入门指南">《ES6 入门指南》</option>
  <option value="JavaScript 高级程序设计">《JavaScript 高级程序设计》</option>
</select>
<p>
哪一本书让您获益最多：{{ selected }}
</p>
<hr>
<!--
  选择列表多选的场景：
    1. 在<select>标签上添加multiple属性，即可变成多选列表
    2. 和复选框一样，用v-model会绑定一个Array类型的数据
    3. 选中选项会，会将它匹配（优先匹配value，次则<option>的text）并push到Array数据中
-->
<select v-model="books" multiple>
  <option value="cholera">Love in the Time of Cholera</option>
  <option>Wuthering Heights</option>
  <option>Jane Eyre</option>
  <option>Pride and Prejudice</option>
  <option value="Gatsby">The Great Gatsby</option>
</select>
<div v-if="!books.length">
  没有看过吗？那您听说过薄荷阅读吗？
</div>
<div v-else>
  哇，您真是博览群书，这个列表里，就看过这么多呢：
  <ul v-for="book in books">
    <li>{{ book }}</li>
  </ul>
</div>
<hr>

<!--
  1 在业务中，<option>经常用v-for动态输出，value和text也是用v-bind来动态输出的
  2 虽然在<select>中可以简单地完成下拉选择需求，但是在实际业务中反而不常用。因为它的样式依赖平台和浏览器，无法统一，也不美观，功能也受限（比如，不支持搜索），所以常见的解决方案是用<div>模拟一个类似的控件。具体可以在学习了组件（components）的内容后再进行尝试。
-->
<select v-model="works" multiple>
  <option 
    v-for="option in options"
    :value="option.value" >{{ option.text }}</option>
</select>
<div v-if="!works.length">
  没有看过吗？那您听说过薄荷阅读吗？
</div>
<div v-else>
  哇，您真是博览群书，这个列表里，就看过这么多呢：
  <ul v-for="work in works">
    <li>{{ work }}</li>
  </ul>
</div>
<hr>



</div>

JavaScript

var app = new Vue({
	el: '#app',
  data: {
  	selected: 'JavaScript 高级程序设计',
    books: [],
    works: [],
    options: [
    	{
      	text: 'LOVE IN THE TIME OF CHOLERA',
        value: 'love in the time of cholera'
      },
      {
      	text: 'WUTHERING HEIGHTS',
        value: 'wuthering heights'
      },
      {
      	text: 'JANE EYRE',
        value: 'jane eyre'
      },
      {
      	text: 'PRIDE AND PREJUDICE',
        value: 'pride and prejudice'
      },
      {
      	text: 'THE GREAT GATSBY',
        value: 'the great gatsby'
      }
    ]
  }
})