<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示表单输入绑定</title>
</head>
<body>
<div id="app">
<h3>多行文本</h3>
<p style="white-space: pre">{{message}}</p>
<br>
<textarea name="text1" id="text1" cols="30" rows="10" v-model="message" placeholder="多行"></textarea><br>
<input type="checkbox" id="checkbox1" v-model="checked">
<label for="checkbox1">{{checked}}</label>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names:{{checkedNames}}</span>
<br>
<input type="radio" id="one" name="myRadio" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" name="myRadio" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked:{{picked}}</span>
<hr>
<select name="select1" id="select1" v-model="mSelected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected:{{mSelected}}</span>
<hr>
<select name="select2" id="select2" v-model="selected">
<option v-for="op in options" v-bind:value="op.value">
{{op.text}}
</option>
</select>
<span>Selectd:{{selected}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
message:'Hello Vue',
checked:true,
checkedNames:['Mike','Jack'],
picked:'One',
selected:'B',
mSelected:['A','C'],
options:[
{
text:'One',
value:'A',
},
{
text:'Two',
value:'B',
},
{
text:'Three',
value:'C',
},
]
}
});
</script>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
