vue的下拉框如何回显_JAVA学习笔记系列：菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记（三）
本周使用了Vue来操作表单，接下来说下Vue中双向绑定表单元素的用法。
Vue中双向绑定是使用的v-model，所谓的双向绑定即改变变量的值，表单元素的值也会改变，同样的，改变表单元素的值变量的值也会改变。例如：
<body>
<div id="content">
<form action="" method="post">
<input type="text" name="username" v-model="username" placeholder="用户名"/>
</form>
用户信息为:{{username}}
</div>
</body>
<script>
var v = new Vue({
el: "#content",
data: {
username : "guest"
}
});
</script>
是不是非常简单？常用的文本框，密码框等用法都基本相识，包括下拉框也是如此，但是单选按钮和复选框则有些不一样，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="content">
<form action="" method="post">
<li><input type="text" name="username" v-model="username" placeholder="用户名"/></li>
<li><input type="password" name="password" v-model="password" placeholder="密码"/></li>
<li>
所在城市：<select name="city" v-model="city">
<option value="武汉">武汉</option>
<option value="长沙">长沙</option>
</select>
</li>
<li>
性别：<input type="radio" name="sex" value="男" v-model="sex"/>男
<input type="radio" name="sex" value="女" v-model="sex"/>女
</li>
<li>
爱好：<input type="checkbox" name="hobby" value="唱歌" v-model="hobby"/>唱歌
<input type="checkbox" name="hobby" value="跳舞" v-model="hobby"/>跳舞
<input type="checkbox" name="hobby" value="画画" v-model="hobby"/>画画
</li>
</form>
<li>用户名：{{username}}</li>
<li>密码：{{password}}</li>
<li>城市：{{city}}</li>
<li>性别：{{sex}}</li>
<li>爱好:{{hobby}}</li>
</div>
</body>
</html>
<script>
var v = new Vue({
el: "#content",
data: {
username : "guest",
password: "12345",
city: "长沙",
sex: "女",
hobby: ["唱歌", "跳舞"]
}
});
</script>
运行后结果如下：
好了，今天的双向绑定就学到这了，下次我们讲讲组件如何使用。
vue的下拉框如何回显_JAVA学习笔记系列：菜鸟Vue学习笔记（三）相关推荐
- thymeleaf(th:each th:selected) 从后台动态获取下拉框数据回显及选中
thymeleaf(th:each th:selected) 从后台动态获取下拉框数据回显及选中 <select οnchange="getChilds(this.value)&quo ...
- 单选按钮、复选框、下拉框的回显
单选按钮.复选框.下拉框的回显 1.单选按钮radio的回显 2.复选框checkbox的回显 3.下拉框select的option回显 在前端页面中,经常需要根据需要来进行信息的回显,如果是普通的文 ...
- Vue elementUI-select多选下拉框数据回显成功后，点击下拉选项或删除回显数据无反应...
在点击的过程中监听了的绑定值的变化,也改变了,但是下拉框是没有反应的 感觉自己设定的值和element ui触发的绑定值有点不一样 在添加的框中选中的值返回的不单单是一个数组还有些其他值,但是自己回显 ...
- mysql下拉框回显_下拉框的回显 （修改时候）
1.效果 2. 实现过程 2.1 点击修改的时候首先根据id去查询该条信息 2.2 显示页面 // 5. select 所属部门 $(function(){ var url="${page ...
- 解决element ui select下拉框不回显数据问题
最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://githu ...
- Vue封装下拉框组件时，为document绑定原生事件addEventlistener(click“)，切换页面之后事件还未被摧毁...
1 <script> 2 export default { 3 props: ["lists"], 4 data() { 5 return { 6 isactive: ...
- vue省市区 下拉框实现
vue省市区 下拉框实现 1.效果如图 选中省之后,再选择对应的市,再选择对应的区 数据源js文件: 码云:https://gitee.com/wyjpositive/mybatis-plus-dem ...
- vue项目下拉框内容过长做一个滚动条的效果
vue项目下拉框内容过长做一个滚动条的效果 如下图: 关键代码如下:
- Vue element 下拉框 可输入可选择(无bug)
背景: 需要一个可填可选的下拉框 当用户自定义输入时,自动添加"(其他)"后缀 效果如下: <el-select v-model="value"place ...
- element做树形下拉_一个基于 elementUi的vue树形下拉框组件
# wl-vue-select,wl-tree-selectcss # 简介vue 用于vue框架的树形下拉框及带全选的普通下拉框. node Tree drop-down box for vue ...
最新文章
- mongodb 初学 意外 连接服务器异常（Connection refused）
- 知道Python中的字符串是什么吗？
- OpenGL3.x,4.x中使用FreeImage显示图片的BUG-黑色，或颜色分量顺序错乱
- Angular 项目中的可摇树依赖 - Tree-shakable dependencies
- 数学建模学习笔记（四）——拟合算法
- java网站短信接口_网云JAVA短信接口API
- 20145302张薇 《信息安全系统设计基础》第14周学习总结
- 如何安装python3.7.2_CentOS7下安装Python3及Pip3并保留Python2
- Left join ,Right join ,inner join 的运行结果的区别
- 更改matplotlib中x或y轴上的“刻度频率”？
- SQL语句group by 与order by 执行顺序引发的一场“内斗”
- Android约束布局
- win7无权限连接网络计算机,win7系统出现无权限访问网络的完美解决技巧
- APM的解锁（ARM）流程
- android中倒计时动画,简单实现Android倒计时效果
- h5页面调用百度地图获取当前位置并在地图上标注出来
- django 自定义中间件实现访问频率限制和IP禁用
- 已知华氏求摄氏C语言,c语言：根据华氏温度求摄氏温度，并分析错误
- 2017湖南对口升学C语言答案,2017湖南对口升学计算机专业分数线
- 黑马VUE电商管理后台笔记记录