vue-表单操作
来源:互联网 发布:网络21成功系统挣钱么 编辑:程序博客网 时间:2024/04/28 15:04
简单操作,与官网相同
<template>
<div>
<h2>vue form表单</h2>
<!-- 复选框 -->
<input type="checkbox" id="dis" v-model="dis">
<p>{{dis}}</p>
<!-- 多个复选框,绑定到同一个数组上 -->
<!-- 作用,可以将选中的放在同一个数组中,再做逻辑操作 -->
<input type="checkbox" id="gary" value="Gary" v-model="checkd">
<label for="gary">Gary</label>
<input type="checkbox" id="hello" value="Hello" v-model="checkd">
<label for="hello">Hello</label>
<p>{{checkd}}</p>
<!-- 单选按钮 -->
<input type="radio" id="one" value="One" v-model="checkdRadio">
<label for="one">单选按钮1</label>
<input type="radio" id="two" value="Two" v-model="checkdRadio">
<label for="two">单选按钮2</label>
<p>单选:{{checkdRadio}}</p>
<!-- 单选列表 -->
<div>
<select v-model="selected">
<option value="china" selected="true">中国</option>
<option value="france" disabled>美国</option>
<option value="germany">英国</option>
</select>
<p>选中:{{selected}}</p>
</div>
<!-- 修饰符 -->
<!-- .trim :去除前后的空格 v-model.trim="text"-->
<!-- lazy 变为在 change 事件中同步 <input type="text" v-model="text" lazy>-->
<!-- .number number类型 -->
<input type="text" v-model.number="text">
<p>-{{text}}-</p>
</div>
</template>
<script>
export default {
data () {
return {
dis: false,
checkd: [],
checkdRadio: null,
selected: 'china', //设china为默认值
text: null
}
}
}
</script>
- vue表单元素操作
- vue-表单操作
- vue+vue-validator 表单验证
- Vue表单及表单绑定
- vue 表单 绑定
- vue表单验证
- vue表单控件绑定
- Vue.js 表单控件
- Vue-表单控件绑定
- vue之表单验证
- vue表单提交
- vue表单事件绑定
- vue表单校验
- VUE表单输入绑定
- 表单控件绑定vue.js
- vue笔记---表单修饰符
- vue表单验证 vee-validate
- Vue的表单控件绑定
- 关注民生民情
- Python error: Unable to find vcvarsall.bat
- java 虚拟机加载类的途径
- C# DataGridView控件使用示例
- 【Linux学习笔记】1:RHEL的安装和与XShell的连接
- vue-表单操作
- 排序算法
- 【Java多线程】多线程的线程安全及同步(synchronized)用法
- uestc 811 GCD 杜教筛 + 自然幂和
- JAVA批量更改文件的后缀名
- ThingInJava-enum笔记
- codevs1557 热浪[SPFA模板]
- 迭代器模式
- 学习1