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