Vue.js 极简小例：表单（输入框 input、文本域 textarea、单选框 radio、下拉菜单 selected、复选框 checkbox）

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。

代码：

<template>
<div > <p>----------------------------------------------------------------------------------------------------------------------<p/><!-- input 框: trim 自动过滤用户输入的首尾空格 --><input v-model.trim="inputContent" placeholder=" 请输入 ... ">input 框内容为: {{ inputContent }}<p><p/><!-- 文本域 --><textarea v-model="textarea" placeholder="请输入 ... "></textarea>文本域 内容为： {{ textarea }}<p>----------------------------------------------------------------------------------------------------------------------<p/><!-- 复选框 --><p>单个复选框 （取逻辑值）：</p> <input type="checkbox" v-model="checked"><label>{{ checked }}</label><p>多个复选框 （绑定到同一个数组）：</p><input type="checkbox" value="我" v-model="checkedNames"><label>我</label><input type="checkbox" value="喜欢" v-model="checkedNames"><label>喜欢</label><input type="checkbox" value="小熊" v-model="checkedNames"><label>小熊</label><br><span>复选框数组的值为: {{ checkedNames }}</span><p>----------------------------------------------------------------------------------------------------------------------<p/><!-- 单选框 --><input type="radio"  value="是" v-model="picked"><label>是</label><br><input type="radio" value="否" v-model="picked"><label>否</label><br><span>单选框选中值为: {{ picked }}</span><p>----------------------------------------------------------------------------------------------------------------------<p/><!-- 下拉菜单 --><div id="app"><select v-model="selected"><option value="">---选水果啰---</option><option value="大柚子">大柚子</option><option value="小柚子">小柚子</option><option value="大大小小的柚子">大大小小的柚子</option></select><br/> <br/> <div id="output">选择的水果是: {{selected}} (啦啦啦，悄悄告诉你，反正我就是喜欢柚子 ...) </div></div><p>----------------------------------------------------------------------------------------------------------------------<p/></div>
</template><script type="text/javascript">export default {    data () {return {selected: '' ,picked : '是',checked : false,checkedNames: [],inputContent: '',textarea: ''}}
}</script>

运行效果：

Vue.js 极简小例：表单（输入框 input、文本域 textarea、单选框 radio、下拉菜单 selected、复选框 checkbox）相关推荐

Vue.js 极简小例： 4 种方式样式绑定、style 的多种方式实现
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 代码: <template><div id="app"> ...
Vue.js 极简小例：数值计算、千米换算为米、九九乘法表、循环
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 代码: <template><div id="app"> ...
Vue.js 极简小例：点击事件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 代码: <template><div> <!-- jy_mothed ...
Vue.js 极简小例：读值、样式调用、if判断、a 标签、点击事件、管道
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 写法: <template><div id="app"& ...
Vue.js+ElementUI+vant生成动态表单配置
前言我司最近在搭建一款后台管理系统,使用的是Vue全家桶配合Element-ui,遇到一个问题,需要处理很多的表单,所以想到的解决方案是通过后台配置生成动态表单,这对于我来说也算是新的挑战,涉及的功 ...
Cleave.js – 自动格式化表单输入框的文本内容
Cleave.js 有一个简单的目的:帮助你自动格式输入的文本内容. 这个想法是提供一个简单的方法来格式化您的输入数据以增加输入字段的可读性.通过使用这个库,您不需要编写任何正则表达式来控制输入文本的 ...
php编辑框禁止输入,如何设置表单的input文本框不可编辑
设置表单input文本框不可编辑的方法:首先创建相应的代码文件:然后通过为表单字段设置为"οnfοcus=this.blur(),readonly.disabled"来实现不可编辑 ...
Vue.js 2.x笔记：表单绑定（3）
1. 基础用法 v-model 指令:在表单 input 和 textarea 元素上创建双向数据绑定. 1.1 单行文本(Text) <div id="app">&l ...
jquery表单选择器input、:text、:password、:radio、:checkbox、:submit、:reset、:image、:button、:file、:hidden
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery表单选择器 jquery表单选择器,包括:input.input.:text.:password.:radio.:c ...

Vue.js 极简小例：表单（输入框 input、文本域 textarea、单选框 radio、下拉菜单 selected、复选框 checkbox）

Vue.js 极简小例：表单（输入框 input、文本域 textarea、单选框 radio、下拉菜单 selected、复选框 checkbox）相关推荐

最新文章

热门文章

Vue.js 极简小例：表单 （输入框 input、文本域 textarea、单选框 radio、下拉菜单 selected、复选框 checkbox）

Vue.js 极简小例：表单 （输入框 input、文本域 textarea、单选框 radio、下拉菜单 selected、复选框 checkbox）相关推荐

最新文章

热门文章

Vue.js 极简小例：表单（输入框 input、文本域 textarea、单选框 radio、下拉菜单 selected、复选框 checkbox）

Vue.js 极简小例：表单（输入框 input、文本域 textarea、单选框 radio、下拉菜单 selected、复选框 checkbox）相关推荐