vue与input表单的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>
  <div id="app">
    <label v-for="(item,key) in originHobbies" :for="item.id">
      <input type="checkbox" :value="item.id" :id="item.id" v-model="hobbies" >
      {{item.name}}
    </label>
    </br>
    {{hobbies}}
  </div>
</body>
<script src="../vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      hobbies:[2] ,
      originHobbies:[
        {'id':1,'name':'篮球'},
        {'id':2,'name':'足球'},
        {'id':3,'name':'乒乓球'},
        {'id':4,'name':'橄榄球'},
        {'id':5,'name':'台球'},
      ]
    },
  })
</script>
<style type="text/css">
  .checked {color:greenyellow}
</style>
</html>

 

上一篇:详解Lombok中的@Builder用法


下一篇:23种设计模式(八)-原型设计模式