Vuejs——(6)Vuejs与form元素

简介: 资料来于官方文档: http://cn.vuejs.org/guide/forms.html 本文是在官方文档的基础上,更加细致的说明,代码更多更全。 简单来说,更适合新手阅读 (二十三)表单绑定 ①常见绑定方法: 【1】文本输入框绑定; 【2】textarea绑定

资料来于官方文档:

http://cn.vuejs.org/guide/forms.html

本文是在官方文档的基础上,更加细致的说明,代码更多更全。

简单来说,更适合新手阅读


(二十三)表单绑定

①常见绑定方法:

1】文本输入框绑定;

2textarea绑定(类似【1】);

3radio选中值绑定;

4checkbox绑定(自动捆绑数组,无需name);

5select绑定;

6select multiple多选选中框绑定;

7】动态绑定(以上不同类型但同一个值可以互动);

8checkbox选中和未选中赋予不同的值(主要是针对不选中状态);

9checkboxradioselect选中状态的值动态绑定(主要是指值动态绑定对象或者是vm实例的属性,例如data里的某个属性,或者是computed的某个值);

 

如代码:


<div id="app">

    <input type="text" v-model="text"/>

    <div>{{text}}</div>

    <div>——————————————</div>

    <textarea style="width:200px;height:100px;" v-model="textarea"></textarea>

    <div>{{textarea}}</div>

    <div>——————————————</div>

    <label><input type="checkbox" v-model="checkbox"/>左边选中右边则为true:{{checkbox}}</label>

    <div>——————————————</div>

    <label><input type="checkbox" value="firstCheckbox" v-model="checkboxes">firstCheckbox</label><br/>

    <label><input type="checkbox" value="secondCheckbox" v-model="checkboxes">secondCheckbox</label><br/>

    <label><input type="checkbox" value="thirdCheckbox" v-model="checkboxes">thirdCheckbox</label><br/>

    <div>以上选中的value情况为:{{checkboxes}}</div>

    <div>以上选中的value情况为(以json格式显示,这里使用了json过滤器):{{checkboxes|json}}</div>

    <div>——————————————</div>

    <label><input type="radio" value="A" v-model="radio"/>value = A</label><br>

    <label><input type="radio" value="B" v-model="radio"/>value = B</label><br>

    <div>{{radio}}</div>

    <div>注意,这里的v-model的值应该被注册到data里面,否则会红字警告(事实上,所有的都应该也这么做)</div>

    <div>——————————————</div>

    <select v-model="select">

        <option>默认值,option不设value</option>

        <option value="B">value的值设为B</option>

        <option selected value="C">默认选择这个,value设为C</option>

    </select>

    <div>{{select}}</div>

    <div>同样,这里不注册也会被报错</div>

    <div>——————————————</div>

    <div>以下是select的多选,按住ctrl可以连续选,按住shift选择区间</div>

    <select style="width:200px;height:100px;overflow: hidden;" v-model="multiple" multiple>

        <option value="A">A</option>

        <option value="B">B</option>

        <option value="C">C</option>

        <option value="D">D</option>

        <option value="E">E</option>

    </select>

    <div>多选选中的值是:{{multiple}}</div>

    <div>注意,这个多选select框是默认带y轴的滚动条的</div>

    <div>——————————————</div>

    <div>动态渲染,checkbox和多选select框是互相影响的</div>

    <label><input type="checkbox" value="A" v-model="Dynamic">A</label><br/>

    <label><input type="checkbox" value="B" v-model="Dynamic">B</label><br/>

    <label><input type="checkbox" value="C" v-model="Dynamic">C</label><br/>

    <select style="width:200px;height:100px;overflow: hidden;" v-model="Dynamic" multiple>

        <option value="A">A</option>

        <option value="B">B</option>

        <option value="C">C</option>

    </select>

    <div>选中情况是:{{Dynamic}}</div>

    <div>——————————————</div>

    <div>选中和选中的值自定义的checkbox</div>

    <label><input type="checkbox" v-bind:true-value="differentValues.t" v-bind:false-value="differentValues.f"

                  v-model="different">true/false</label><br/>

    <div>different value: {{different}}</div>

    <div>注意,以上不能像普通checkbox那么样,用一个数组作为多个checkbox的v-model的变量,且其值是绑定与vm实例的某个属性;

        因此,不能在v-bind里的值是一个字符串,但可以是一个对象,例如{a:1}这样(当然,这个时候显示的值也是一个对象了)

    </div>

    <div>——————————————</div>

    <div>自定义之的radio</div>

    <label><input type="radio" v-bind:value="text" v-model="customize"/>值为1</label>

    <label><input type="radio" v-bind:value="textarea" v-model="customize"/>值为1</label>

    <div>{{customize}}</div>

    <div>同样,值可以是vm的一个属性或者是一个对象,另外,同样有效的还有select。(主要就这三个有选中状态,除此之外虽然例如Date类型也有选中,但是意义不大)</div>

    <div>——————————————</div>

</div>

<script>

    var vm = new Vue({

        el: '#app',

        data: {

            text: "默认有输入内容",

            textarea: "这里是多行文字\n第二行,\\n是换行符,但在字符串里显示为空格",

            checkboxes: [],

            radio: "",

            select: "",

            multiple: "",

            Dynamic: {},

            different: "",

            differentValues: {

                t: "true",

                f: "false"

            },

            customize: ''

        }

    })

</script>


 

 

②添加参数:

参数

说明

lazy

非实时更新,而是focus状态结束后更新

number

将值自动转为number类型输出

debounce

延迟若干毫秒再更新数值

 

 

1lazy

在取消focus状态后才更新值,而不是按键按下时就更新值。

对文本输入框和textarea都有效

 

如代码:

<input type="text" v-model="text" lazy/>
<
div>{{text}}</div>

 

 

2number

将输入的值自动转为number类型,如果转后为NaN类型,则返回原值;

如代码:

<input type="text" v-model="text" number/>
<
div>{{text}}</div>
<
div>{{typeof text}}</div>

 

如果加上number这个参数,那么输入数字时,则提示类型为string,加上之后,纯数字会提示number类型;

 

 

3debounce=”毫秒数

当值连续若干毫秒没有变化时,触发变量的值的改变;

如代码:

<input type="text" v-model="text" debounce="1000"/>
<
div>{{text}}</div>

当我以500ms的时间差依次输入1,2,3,4,5,6这六个数字时,text的值不会被更新;

当我停止输入有1000ms时,text值才会被更新;

因此,适合类似ajax等高消耗操作。

目录
相关文章
|
11天前
|
JavaScript 索引
vue 在 v-for 时给每项元素绑定事件
在 Vue 中使用 v-for 渲染列表时,可以通过给每项元素绑定事件来实现交互功能。通常使用 `@click` 等事件修饰符,结合方法或内联表达式来处理事件。例如:`&lt;li v-for=&quot;item in items&quot; @click=&quot;handleClick(item)&quot;&gt;{{ item }}&lt;/li&gt;`。
|
3月前
|
JavaScript
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
这篇文章介绍了如何在Vue 2或Vue 3项目中实现一个自定义的全局指令`v-dragSwitch`,用于创建可以任意方向拖拽并悬浮的元素,同时包含边界处理的逻辑。
916 2
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
|
3月前
|
JavaScript 前端开发
vue获取元素属性
vue获取元素属性
44 3
|
3月前
|
JavaScript
Vue——vue2监听元素style变化
Vue——vue2监听元素style变化
46 2
|
3月前
|
前端开发 JavaScript
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
本文介绍了如何在Vue3项目中实现一个鼠标拖动调整元素宽度的功能,并展示了点击按钮收起或展开侧边栏的效果,提供了完整的实现代码和操作演示。
582 0
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
|
4月前
|
JavaScript
vue实战——元素的拖拽 + 控制元素无法拖拽出盒子 + 随元素拖拽自适应变化大小的盒子
vue实战——元素的拖拽 + 控制元素无法拖拽出盒子 + 随元素拖拽自适应变化大小的盒子
37 1
|
5月前
|
JavaScript 索引
Vue.js的`v-for`用于基于数组或对象渲染列表,如遍历数组生成`&lt;li&gt;`元素
【6月更文挑战第25天】Vue.js的`v-for`用于基于数组或对象渲染列表,如遍历数组生成`&lt;li&gt;`元素。基本语法是`v-for=&quot;(item, index) in items&quot;`,支持遍历对象的键值对。注意与`v-if`同用时应使用`&lt;template&gt;`,组件上使用`v-for`需设`key`属性以优化性能。
64 2
|
4月前
|
JavaScript 前端开发
文本,粘贴事件如何实现,先实现一个小目标,如何存入图片,从本地生成源码,先转成base64,ctrl + v这张图片就显示出来了怎样实现的,Vue可以有方法可以获取粘贴的所有元素,转base64字符串
文本,粘贴事件如何实现,先实现一个小目标,如何存入图片,从本地生成源码,先转成base64,ctrl + v这张图片就显示出来了怎样实现的,Vue可以有方法可以获取粘贴的所有元素,转base64字符串