vue-同页面-多下拉选择-选值不重复

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue-同页面-多下拉选择-选值不重复</title>
  <style>
    #app{
      text-align: center;
      font-size: 1.2em;
    }
    select{
      margin: 30px 10px;
      font-size: 1em;
    }
  </style>
</head>
<body>
  <div id="app">
    <select v-model="select1">
      <option selected disable value="请选择">请选择</option>
      <option v-for="x of 10" :key="x" v-if="x == select1 || !selected.includes(x.toString())">{{x}}</option>
    </select>
    <select v-model="select2">
      <option selected disable value="请选择">请选择</option>
      <option v-for="x of 10" :key="x" v-if="x == select2 || !selected.includes(x.toString())">{{x}}</option>
    </select>
    <select v-model="select3">
      <option selected disable value="请选择">请选择</option>
      <option v-for="x of 10" :key="x" v-if="x == select3 || !selected.includes(x.toString())">{{x}}</option>
    </select>
    <p>{{selected}}</p>
  </div>
<script src="https://cdn.bootcss.com/vue/2.5.12/vue.min.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
      select1: '请选择',
      select2: '请选择',
      select3: '请选择'
  },
  computed: {
    selected () {
      return [this.select1, this.select2, this.select3]
    }
  }
})
</script>
</body>
</html>

在线查看


2018-03-10 04:57 浏览(34) 留言(0)