Vue 实现单选框,复选框

单选框

<div id="app-2">
  <label for="a">a</label>
  <input type="radio" name="" id="a" value="a" v-model='ste'>
  <label for="b">b</label>
  <input type="radio" name="" id="b" value="b" v-model="ste">
  {{ste}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  var app2 = new Vue({
  el: '#app-2',
  data: {
    arr:[],
    count:0,
    ste:'a'
  }
})

复选框

  <div id="app-2">
  <label for="a">a</label>
  <input type="radio" name="" id="a" value="a" v-model='ste'>
  <label for="b">b</label>
  <input type="radio" name="" id="b" value="b" v-model="ste">
  {{ste}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  var app2 = new Vue({
  el: '#app-2',
  data: {
    ste:[]
  }
})

下拉菜单

<div id="app-2">
  <select v-model="selected">  // multiple
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  var app2 = new Vue({
  el: '#app-2',
  data: {
    selected:'A',
  }
})

补充:v-model.lazy 较好用 类似防抖函数

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容