input select 值得绑定与获取

<div style="margin-top:100px"><!--Input 值得绑定--><div id="app20"><input id="txt01" v-model="message" placeholder="请输入..." /><span>{{ message }}</span><textarea id="area" v-model="message2"></textarea><!--单个复选框   true  false--><input type="checkbox" id="c00" v-model="checked" /><span>{{ checked }}</span><!--多个复选框绑定同一个数组即可    value的值得数组--><label for="c01">选择框1</label><input type="checkbox" id="c01" value="c01" v-model="checkNames" /><label for="c02">选择框2</label><input type="checkbox" id="c02" value="c02" v-model="checkNames" /><label for="c03">选择3</label><input type="checkbox" id="c03" value="c03" v-model="checkNames" /><span>{{ checkNames }}</span><!-- select 列表--><select v-model="selected" name="fruit"><option v-for="va in Infos" v-bind:value="va.value">{{ va.obj }}</option>       </select><span>{{ selected }}</span>
</div>
<button id="btn" οnclick="getValue()">获取值</button>

  

<script>new Vue({el: "#app20",data: {message: '',message2: 'hahah\r\n12324325',checkNames: [],checked: false,selected: '',Infos: [{ obj: 'asasa', value: '11'}, {obj:'fdfsd',value:'22'}]}})function getValue() {alert($("#txt01").val());}</script>

  

转载于:https://www.cnblogs.com/hnzheng/p/9140425.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368521.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

box-shadow IE8兼容处理

根据canisue&#xff08;http://caniuse.com/#searchbox-shadow&#xff09;&#xff0c;box-shadow兼容性如下图所示&#xff1a; 测试代码&#xff1a; 1 <!DOCTYPE html>2 <html>3 4 <head>5 <meta charset"UTF-8">6 …

ECharts.js学习(一) 简单入门

EChart.js 简单入门 最近有一个统计的项目要做&#xff0c;在前端的数据需要用图表的形式展示。网上搜索了一下&#xff0c;发现有几种统计图库。 MSChart 这个是Visual Studio里的自带控件&#xff0c;使用比较简单&#xff0c;不过数据这块需要在后台绑定。 ichartjs 是一款…

金蝶云系统显示服务器离线,金蝶云服务器已离线是什么情况

金蝶云服务器已离线是什么情况 内容精选换一换根据是否支持挂载至多台云服务器可以将磁盘分为非共享磁盘和共享磁盘。一个非共享磁盘只能挂载至一台云服务器&#xff0c;而一个共享磁盘可以同时挂载至多台云服务器。共享磁盘是一种支持多个云服务器并发读写访问的数据块级存储设…

Spring Data Solr教程:Solr简介

大多数应用程序必须具有某种搜索功能。 问题在于搜索功能通常是巨大的资源消耗&#xff0c;它们可能通过给数据库造成沉重的负担而破坏我们应用程序的性能。 因此&#xff0c;将负载转移到外部搜索服务器是个好主意。 这是我的Spring Data Solr教程的第一部分。 在本教程中&am…

Liunx常用的100条命令汇存

1、关机 shutdown -h now 立刻关机 poweroff shutdown -r now 立刻重启 reboot logout 注销2、进入图形界面 startx3、vi编辑器 [vi] [path]/[file]&#xff1b; [i]进入编辑模式&#xff1b; [esc]进入命令模式&#xff1b; [:wq]保存并退出&#xff1b;[:q!]退出…

分布式是什么意思_机架式ups是什么意思?与分布式DPS有何不同之处?

ups电源很多人听过了&#xff0c;主要是让设备在突然断电的情况下遭遇停电的损坏&#xff0c;保障数据及重要程序运行。那么&#xff0c;机架式ups电源可能就是很多人不太了解的了&#xff0c;在说到与分布式DPS有何不同之处那是很少有人清楚了解了&#xff0c;不管怎么说&…

【原】老生常谈-从输入url到页面展示到底发生了什么

刚开始写这篇文章还是挺纠结的&#xff0c;因为网上搜索“从输入url到页面展示到底发生了什么”&#xff0c;你可以搜到一大堆的资料。而且面试这道题基本是必考题&#xff0c;二月份面试的时候&#xff0c;虽然知道这个过程发生了什么&#xff0c;不过当面试官一步步追问下去的…

WebApi在MVC 4中一个Controll多个post方法报错处理

http://blog.csdn.net/lqh4188/article/details/53542400&#xff08;原创&#xff09; 转载于:https://www.cnblogs.com/william-CuiCui0705/p/8023832.html

光耀卡服务器维修,3月28日服务器更新维护公告

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼亲爱的战友&#xff1a;我们将于03月28日08:00-13:00对所有服务器进行更新维护。在此期间无法登录游戏&#xff0c;给大家带来的不便我们深表歉意。- 商城兑换1)无限紫晶幸运箱 限时兑换※使用后必定获得一款限定永久武器※可重复获…

JPA – Hibernate –包级别的类型映射

当我们最终成熟到可以在JPA中使用某些自定义类型映射时&#xff0c;我们通常会停留在某些提供程序特定的解决方案上&#xff0c;因为JPA本身并未定义任何实现此功能的机制。 让我为您展示一个JPA提供程序Hibernate的自定义类型映射定义的示例。 假设我们在项目中使用Joda Money…

关于文件关联的图标不能正常显示

不知道有没有人遇到过这种情况&#xff1a; 这两种情况都是关联的图标不能正常显示&#xff0c;但是可以正常打开。总觉得看着挺碍眼的&#xff0c;就看了下注册表&#xff0c;发现可以用以下方法解决&#xff1a; 打开注册表&#xff0c;[HKEY_CLASSES_ROOT]找到需要修改的文件…

web前端常用知识点

1、常见的块级元素 内联元素 div -最常用的块级元素 dl - 和dt-dd 搭配使用的块级元素 form - 交互表单 h1 -h6- 大标题 hr - 水平分隔线 ol – 有序列表 p - 段落 ul - 无序列表 fieldset - 表单字段集 colgroup-col - 表单列分组元素 table-tr-td 表格及行-单元格 pre - 格…

Android 7.0 fiddler代理抓不到https请求的解决办法

Android 7.0 fiddler代理抓不到https请求的解决办法 解决方法&#xff1a; 1.在源码res目录下新建xml目录&#xff0c;增加network_security_config.xml文件 &#xff08;工程名/app/src/main/res/xml/network_security_config.xml&#xff09;network_security_config.xml文件…

华为畅享8plus停产了吗_牢记华为手机“三不买”原则,不花冤枉钱,选错要吃亏!...

如今华为手机已经占据国内手机市场份额的半壁江山&#xff0c;华为自然也就成为了买手机的首选。那么华为手机真的好吗&#xff1f;我认为应该理性看待&#xff0c;因为每个手机品牌都有好手机也有差手机&#xff0c;其实买华为你只需要牢记“三不买”原则&#xff0c;就可以不…

Spring MVC:MySQL和Hibernate的安全性

Spring有很多不同的模块。 所有这些对于具体目的都是有用的。 今天&#xff0c;我将讨论Spring Security。 该模块提供了灵活的方法来管理访问Web应用程序不同部分的许可。 在这篇文章中&#xff0c;我将研究Spring MVC &#xff0c; Hibernate &#xff0c; MySQL与Spring Sec…

Python 离线 安装requests第三方库

一、介绍 requests是Python的一个HTTP客户端库&#xff0c;跟urllib&#xff0c;urllib2类似&#xff0c;不过requests的优势在于使用简单&#xff0c;相同一个功能&#xff0c;用requests实现起来代码量要少很多。毕竟官方文档都很直白的说&#xff1a; python的标准库urllib2…

JS分页条插件

目标 制作js分页导航jq插件,用于无刷新分页或者刷新分页 实现目标参考京东和天猫的分页条. 有四个固定按钮,前页码,后页码,首页,末页. 程序关键点在于计算中间页面的起止位置.逻辑是以当前页码为参照点,根据需要显示的页码按钮个数,计算参照点前后的页码数量. 当起止点小于1或者…

头同尾合十的算法_乘法速算之首同尾合十

两位数乘两位数中&#xff0c;有一种特殊情况不需要列竖式&#xff0c;可以直接说出答案&#xff0c;那就是“首同尾合十”——十位相同&#xff0c;个位数字之和是10。一、巧算方法前两位&#xff1a;十位数字(十位数字1)&#xff0c;后两位&#xff1a;个位相乘例如&#xff…

Bootstrap定制开发

Bootstrap作为目前很受欢迎的前端框架&#xff0c;越来越多的网站开始使用基于Bootstrap框架进行开发。 1、定制开发方法 &#xff08;1&#xff09;Bootstrap定制开发可以使用LESS和Grunt实现定制化 &#xff08;2&#xff09;在线实现定制化开发&#xff0c;地址为&#x…

JavaFX逆运动学库2.0

这是第一篇讲解javafx-ik的基础教程&#xff0c; javafx-ik是JavaFX的逆运动学库。 该库的源代码可以从GitHub下载。 什么是 图1&#xff1a;单骨 骨骼是使用javafx-ik库进行逆运动学的基本基础。 骨骼具有一定长度和关节&#xff0c;骨骼可以围绕该关节旋转。 具有关节的一端…