Vue.js 复选框

demo

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vuejs</title>
  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="app">
      <p>复选框：</p>
       <input type="checkbox" id="basketball"  value="篮球" v-model="checkedNames">
       <label for="basketball">篮球</label>
       <input type="checkbox" id="football"  value="足球" v-model="checkedNames">
       <label for="football">足球</label>
    <input type="checkbox" id="tennis" value="网球" v-model="checkedNames">
    <label for="tennis">网球</label>
       <span>您选择的值为：{{checkedNames}}</span>
  </div>
<script>
   new Vue({
     el:'#app',
     data: {
       checkedNames:[]
     }})
</script>
</body>
</html>

　　效果：

 

 

2018-03-20    15:58:33

posted @ 2018-03-20 15:59  1点  阅读(274)  评论(0)    收藏  举报