vue --- 基本的表单元素

<template>
<div>input: <input type='text' v-model='input_value' />,输入的值: {{input_value}}<hr />text area: <textarea v-model="textarea_value"></textarea>,输入的值: {{textarea_value}}<hr/>radio:<input type='radio' v-model='radio_value' value='A' /> A,<input type='radio' v-model='radio_value' value='B' /> B,<input type='radio' v-model='radio_value' value='C' /> C,输入的值: {{radio_value}}<hr />checkbox:<input type='checkbox' v-model='checkbox_value'v-bind:true-value='true'v-bind:false-value='false'/>输入的值:{{checkbox_value}}<hr/>select:<select v-model='select_value'><option v-for="e in options" v-bind:value="e.value">{{e.text}}</option></select>输入的值:{{select_value}}
</div>
</template><script>
export default {data () {return {input_value: '',textarea_value: '',radio_value: '',checkbox_value: 'false',select_value: 'spicy',options: [{text: '红烧肉', value: 'A'},{text: '馕包肉', value: 'delicious'},{text: '水煮鱼', value: 'spicy'}]}},methods: {}
}
</script>

效果如下:
在这里插入图片描述

Modifiers (后缀词)
(1) .lazy在用户对某个文本框做输入的时候,文本框中的值不会随着用户按下的每一个键立刻发生变化,而是等焦点彻底离开文本后触发视图中的值的变化
<input type='text' v-model.lazy="input_value" />

参考 《Vue.js快速入门》 P99~P101

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

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

相关文章

vue --- 提交表单到服务器

<template> <div><textarea v-modelcontent></textarea><br/><input typebutton clicksubmit value留言 /> </div> </template><script> export default {data () {return {content: }},methods: {submit: function () …

节约内存:Instagram的Redis实践(转)

一、问题&#xff1a; 数据库表数据量极大&#xff08;千万条&#xff09;&#xff0c;要求让服务器更加快速地响应用户的需求。二、解决方案&#xff1a;1.通过高速服务器Cache缓存数据库数据2.内存数据库三、主流解Cache和数据库对比&#xff1a;从以上各数据可知&#xff0c…

多数公司容易犯的5个大数据错误

多数公司容易犯的5个大数据错误 如今&#xff0c;大数据革命驱动了现代工业发展&#xff0c;每天都有越来越多的企业采用大数据技术。然而&#xff0c;尽管大量数据已经存在和应用了很长时间&#xff0c;但如何使用它&#xff0c;仍然存在许多严重的错误。 以下是企业容易犯的5…

(2.15)备份与还原--使用作业备份、清理过期备份、清理历史记录、事务日志是否备份过...

一、建立作业备份数据库 打开SQL SERVER MANAGEMENT STUDIO&#xff0c;启动SQL SERVER代理服务&#xff08;注意在“控制面板-管理工具-服务”中设置SQL SERVER AGENT的启动类型为自动&#xff09;。启动后点击“作业-新建作业”&#xff0c;弹出一个作业属性的窗口&#xff0…

javascript+HTML+CSS面试题

今天参加面试&#xff0c;考了我三个小时&#xff0c;考晕了&#xff0c;赶紧补习补习javascript的知识&#xff01;&#xff08;另&#xff1a;人事部明明说招HTML5CSS3jQuery&#xff0c;考1个半小时左右&#xff0c;怎么变成了考传统DIVCSSjavascript啦&#xff0c;呜呜呜~~…

android 对话框

android 8种对话框&#xff08;Dialog&#xff09;使用方法汇总 作者&#xff1a;gzdaijie本文为作者原创&#xff0c;转载请注明出处&#xff1a;https://www.cnblogs.com/gzdaijie/p/5222191.html 目录 1.写在前面2.代码示例2.1 普通Dialog&#xff08;图1与图2&#xff09;2…

算法 --- 插入排序的JS实现

let A [5, 2, 4, 6, 1 ,3];// 插入排序 insertionSort (A) > {console.log("原数组>>>", A);for (let j1; j<A.length; j) {let key A[j];i j -1;while ( i > -1 && A[i] > key) {A[i1] A[i];i i-1;}A[i 1] key;}console.log(&q…

算法 --- 归并排序的js实现

let mergeSort (A, p, q, r) > {console.log("原数组>>>", A);let n1 q - p 1;let n2 r - q;let L new Array();let R new Array();for (let i 1; i < n1 1; i) {L[i -1] A[p i - 1];}for (let j 1; j < n2 1; j) {R[j-1] A[q j];}L[…

个人技术博客

一. Volley框架 在进行和服务器交互的时候需要发送请求&#xff0c;发现了volley这个好用易上手的框架。volley是一个异步网络通信框架&#xff0c;它的优点在于轻量级、适用于量小但传送频繁的请求操作 搭建请求的第一步就是新建一个请求队列RequestQueue queue Volley.newRe…

软件构造 第一章第二节 软件开发的质量属性

​软件构造 第一章第二节 软件开发的质量属性 1.软件系统质量指标 External quality factors affect users 外部质量因素影响用户 Internal quality factors affect the software itself and its developers 内部质量因素影响软件本身和它的开发者 External quality results fr…

css自媒体查询

准备工作1&#xff1a;设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码&#xff0c;来兼容移动设备的展示效果&#xff1a; <meta name"viewport" content"widthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno">…

css --- 应用媒介查询制作响应式导航栏

以上导航会自动适应各个尺寸的屏幕 代码如下: <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <meta name"apple-mobile-w…

Drools 7.4.1.Final参考手册(六) 用户手册

用户手册 基础 无状态的知识Session Drools规则引擎拥有大量的用例和功能&#xff0c;我们要如何开始&#xff1f;你无须担心&#xff0c;这些复杂性是分层的&#xff0c;你可以用简单的用例来逐步入门。 无状态Session&#xff0c;无须使用推理&#xff0c;就形成了最简单的用…

css --- 弹性盒子

左右两侧按1:1自适应,中间固定宽度500px // CSS /* 首先定义 container &#xff0c;关注display */ /* webkit 是Chrome、Safari 的浏览器前缀 */ .container{margin: auto;display: -webkit-box;width: 80%&#xff1b;height: 200px; } /* 开始定义左、中、右 */ .left { …

更精炼更专注的RTMPClient客户端EasyRTMPClient,满足直播、转发、分析等各种需求...

现状 EasyRTMPClient&#xff0c;熟悉的朋友就会联想到EasyRTSPClient项目&#xff08;https://github.com/EasyDSS/EasyRTSPClient&#xff09;&#xff0c;EasyRTSPClient从14年中期开始发展&#xff0c;已经迭代发展历时3年多时间&#xff0c;可以说在RTSPClient领域是非常成…

bootstrap --- 表格

几个可选类: .table-bordered: 为表格加上边框 .table-striped: 为表格加上斑马效果 .table-hover: 鼠标悬停在表格行上时展现不同得颜色 .table-condensed: 更为紧凑的表格样式 // 导入样式,从bootstrap官网导入CDN // HEAD <link rel"stylesheet" href"…

mongodb数据库中插入数据

mongodb数据库中插入数据 一&#xff1a;connection 访问集合&#xff1b; 在mongodb数据库中&#xff0c;数据是存储在许多数据集合中&#xff0c;可以使用数据库对象的collection方法访问一个集合。该方法使用如下&#xff1a; db.collection(collectionName, [options], [ca…

bootstrap --- 表单

// HTML >>> 第一种样式 <!DOCTYPE html> <html> <head><link rel"stylesheet" href"https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity"sha384-Gn5384xqQ1aoWXA058RXPxPg6fy4IWvTNh0E263XmF…

bootstrap --- 按钮

<head><!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel"stylesheet" href"https://cdn.jsdelivr.net/npm/bootstrap3.3.7/dist/css/bootstrap.min.css" integrity"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4VaPmSTs…

bootstrap --- 分页

// bootstrap中给无序列表的ul元素添加pagination类即可.<ul class"pagination"><li class"disabled"><a href"#">&laquo;</a></li><li class"active"><a href"#">1</a&g…