3.单选按钮
单选按钮的双向数据绑定：
下面例子实现将选中的单选按钮的值显示到页面上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单选按钮</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="radio" id="firefox" value="Firefox" v-model="picked">
<label for="firefox">Firefox</label>
<br>
<input type="radio" id="google" value="Google" v-model="picked">
<label for="google">Google</label>
<br>
<span>选中值为: {{ picked }}</span>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
picked:"Firefox"
}
})
</script>
</body>
</html>
勾选Google，则选中的值就会显示的是Google
4.select列表
下面我们来实现下拉列表的双向数据绑定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉列表</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<select v-model="selected" name="fruit">
<option selected="selected" value="" >选择一个网站</option>
<option value="www.51code.com">51code</option>
<option value="www.google.com">Google</option>
</select>
<div id="output">
选择的网站是: {{selected}}
</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
selected:" "
}
})
</script>
</body>
</html>
运行的结果是：
选择下拉菜单的内容，当选中51code是，选择的网站就会显示为www.51code.com
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
