<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
</head>
<body>
<!-- 表单元素数据绑定 -->
<!-- input数据绑定 -->
<div id="div1">
<input type="text" v-model="message">
<br/>
<!-- checkbox -->
<input type="checkbox" v-model="checked"><span>{{checked}}</span>
<br/>
<!-- radio -->
<input type="radio" name="choice1" value="是" v-model = "choice">
<label for="">是</label>
<br/>
<input type="radio" name="choice1" value="否" v-model = "choice">
<label for="">否</label>
<br/>
<span>{{choice}}</span>
<!-- select -->
<br/>
<select v-model="selected">
<option>男</option>
<option>女</option>
</select>
<span>{{selected}}</span>
<br/>
<select v-model="multiSelect" multiple>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
<span>{{multiSelect}}</span>
<pre>data: {{$data | json }}</pre>
</div>
<!-- select option的value和实际value不同时 -->
<div id="div2">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
</select>
<span>selected:{{selected}}</span>
</div>
<script>
var test = new Vue({
el:"#div1",
data:{
message:"hello vue.js",
checked:true,
choice:"",
selected:"男",
multiSelect:""
}
});
var test1 = new Vue({
el:"#div2",
data:{
selected:'a',
options:[
{ text: 'A', value: 'a' },
{ text: 'B', value: 'b' }
]
}
})
</script>
</body>
</html>vue.js表单数据双向绑定
最新推荐文章于 2023-06-10 15:14:02 发布
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
