Vue.js学习系列（三十九）-- Vue.js表单 （三）
来源：互联网 发布：hdr as200v 软件 编辑：程序博客网 时间：2024/05/22 03:55
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
- Vue.js学习系列（三十九）-- Vue.js表单 （三）
- Vue.js学习系列（三十七）-- Vue.js表单
- Vue.js学习系列（三十八）-- Vue.js表单 （二）
- Vue.js 学习（三）
- vue.js学习（三）
- Vue.js学习系列（三十五）-- Vue.js事件监听
- Vue.js学习系列（四十二）-- Vue.js组件
- Vue.js学习系列（三十二）-- Vue.js样式绑定（三）
- Vue.js学习系列（三）---第一个vue.js程序
- Vue.js学习笔记（三）
- 前端框架vue.js系列（5）：表单
- vue学习系列-认识vue.js
- Vue.js学习系列（三十）-- Vue.js样式绑定（一）
- Vue.js学习系列（三十一）-- Vue.js样式绑定（二）
- Vue.js学习系列（三十三）-- Vue.js样式绑定（四）
- Vue.js学习系列（三十四）-- Vue.js样式绑定（五）
- Vue.js 学习（二）
- vue.js学习（一）
- OpenCV for Python 学习笔记 1.1 图像的读取
- 解决服务器连接错误Host ‘XXX’ is not allowed to connect to this MySQL server
- Dsu on tree 神奇的暴力
- windows上subprocess.Popen的参数close_fds=True与stdin/stdout/stderr不能共存
- mysql总结
- Vue.js学习系列（三十九）-- Vue.js表单 （三）
- Testng与JUnit
- Python之测试代码
- 练习时候用到的正则表达式
- Poj 1743 Musical Theme(后缀数组+二分答案)
- 代理模式
- emacs 找不到应用程序
- 2017年3月春招实习生笔试题目汇总
- EffectiveJava第二章：创建和销毁对象
