week 8.24-8.30
- | Study-update |
---|---|
-Mon | vue文档学习 |
- | 工作 |
- | 工作 |
- | 工作 |
- | 工作 |
-sat | vue |
- | Study-update |
- | - |
8.29 Saturday
处理勾选的表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="favorite" value="足球">足球
<input type="checkbox" v-model="favorite" value="dota">dota
<input type="checkbox" v-model="favorite" value="篮球">篮球
<div>{{favorite}}</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
favorite: []
},
})
</script>
</body>
</html>
根据数组遍历出单选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<label v-for="i in interestList">
<input type="checkbox" v-bind:value="i" v-model="interest">{{i}}
</label>
<div>{{interest}}</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
interestList: ['dota', '足球', '篮球', '排球'],
interest: []
},
})
</script>
</body>
</html>