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

vue --- 基本的表单元素相关推荐

vue动态生成表单元素基础篇
这里讲解一个vue生成表单的简单实例: (图一) (图二) (图三) 如上图所示: 图一: 空的输入框的情况图二: 点击 "+" 添加生成表单的情况图三: 表单中可以输入值,并 ...
vue动态生成表单元素
前几天接了一个需求,需要动态生成一个表单数据,然后提交,提交完数据后.通过编辑按钮进入时,需要进行数据回填. 一.页面展示: I. 没生成表单前的状态 Vue-UEedit UEedit II. 单机 ...
vue v-model 双向绑定表单元素的数据：实质是绑定了value、checked、selected属性
用法: 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. 它会根据控件类型自动选取正确的方法 ...
【15】Vue：02-Vue表单基本操作、表单修饰符、自定义指令、计算属性computed、侦听器watch、过滤器、生命周期、数组变异方法、替换数组、动态数组响应数据、图书列表案例、TODOS案例
文章目录 day02 Vue常用特性表单基本操作表单修饰符自定义指令 Vue.directive 注册全局指令 Vue.directive 注册全局指令带参数自定义指令局部指令计算属性 c ...
vue 给form表单赋值_vue获取form表单的值示例
vue获取form表单的值示例这里使用的是Element-ui组件 html: JS: var phone = this.phone; var password = this.password; v ...
html5表单实例元素,HTML5新表单元素的图文实例-
这一篇介绍html5新增的表单元素和表单属性. 首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何 ...
【2018-01-22】HTML-表单及表单元素
<body><form action="" method="post">& ...
5 select 选择的值_表单元素之选择类型
表单元素的选择类型可以分为三种: 单选多选下拉单选和复选框的属性值可以有两个:disabled(不可操作的) 和 checked. 下拉框的属性值可以是:selected(默认选中) .mult ...
css label 居中布局_HTMLCSS精华知识点——表单元素、BFC、两栏布局、居中总结等...
HTML&CSS精华知识点--第九节一.input表单元素一系列元素,主要用于收集用户数据 1.type属性表示输入框类型text:普通文本输入框 date,日期选择框,兼容性问题 sea ...

vue --- 基本的表单元素

vue --- 基本的表单元素相关推荐

最新文章

热门文章