首页 > 其他分享> > vue与input表单的使用

vue与input表单的使用

2021-10-20 14:31:48 作者：互联网

<!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>

标签：el,vue,name,greenyellow,app,表单,hobbies,input,id
来源： https://www.cnblogs.com/polax/p/15428705.html