v-model 值绑定

<!DOCTYPE html>
<html>
<head>
　　<title>组件</title>
　　<meta charset="utf-8" />

</head>
<body>
　　<div id="app">
　　　　<h2> 爱好是：{{hobbies}}</h2>
　　　　<label v-for="item in origin" :for="item"><!--遍历定义数组内的内容-->
　　　　　　<input type="checkbox" :value="item" :id="item" v-model="hobbies"><!--值绑定 id绑定 双向绑定-->
　　　　　　{{item}}
　　　　</label>
　　</div>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>
<script>//定义一个Vue组件component
　　const app=new Vue({
　　　　el:"#app",
　　　　data:{
　　　　　　message:'你好啊',
　　　　　　isAgree:false,
　　　　　　hobbies:[ ],
　　　　　　origin:['篮球','足球','排球']
　　　　}
　　})


</script>
</body>
</html>

posted @ 2020-10-23 16:43  眰  阅读(484)  评论(0)    收藏  举报