vue-07 表单双向绑定-视频自学

一时失言乱红尘 2022-12-18 15:52 1阅读 0赞

** 01 **

v-model

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

<div id="app">
    <input v-model="msg" placeholder="请输入文字">
    <p>信息是: {
        {msg }}</p>
    </div>
    <script>
    var app = new Vue({
    data:{msg:''},
        })
    </script>

** 02 **

**复选框 **

复选框默认选中值为true 未选中值为false

<input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{
        { checked }}</label>

** 03 **

多个复选框

我们可以把多个复选框的值保存在一个数组里面

<div id='app'>
    <input type="checkbox" id="name1" value="木木" v-model="checkedNames">
    <label for="name1">木木</label>
    <input type="checkbox" id="name2" value="曾庆林" v-model="checkedNames">
    <label for="name2">曾庆林</label>
    <input type="checkbox" id="name3" value="mumu" v-model="checkedNames">
    <label for="name3">mumu</label>
    <br>
    <span>选择的名字是: {
        { checkedNames }}</span>
    </div>
    <script>
    var app = new Vue({
    data:{checkedNames:[]},
        })
    </script>

** 04 **

**修饰符**

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<input v-model.lazy="msg" >

**.number**

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

<input v-model.number="age" type="number">

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 表单输入绑定

基础用法你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神

小鱼儿/ 2023年10月11日 13:06/ 0 赞/ 89 阅读

相关 vue双向绑定

讲的非常清楚的一篇博客，感谢博主[https://www.jianshu.com/p/e7ebb1500613][https_www.jianshu.com_p_e7ebb15

雨点打透心脏的1/2处/ 2023年05月30日 06:17/ 0 赞/ 50 阅读

相关 Vue--双向绑定

原文网址：[Vue--双向绑定\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN] 其他网址 > [父子组件prop值的双向绑定][prop] 简

忘是亡心i/ 2022年12月21日 06:24/ 0 赞/ 278 阅读

相关 vue-07 表单双向绑定-视频自学

01 v-model 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select>元素上创建双向数据绑定。它会根据控件类型自动

一时失言乱红尘/ 2022年12月18日 15:52/ 0 赞/ 2 阅读

相关 Vue双向绑定

实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发

清疚/ 2022年11月27日 10:21/ 0 赞/ 254 阅读

相关 VUE双向绑定

1、什么是setter、getter ？　　答：首先，别误以为他们就是一会要说的get、set，我们先看一句定义： > 对象有两种属性：（1）数据属性，

r囧r小猫/ 2022年11月07日 13:16/ 0 赞/ 51 阅读

相关 Vue 组件实现表单的双向绑定

下面是一个简单的货币输入的自定义控件，来自https://cn.vuejs.org/v2/guide/components.html： <body> <div

小灰灰/ 2022年06月07日 04:15/ 0 赞/ 247 阅读

相关 VUE双向绑定

转自：http://www.cnblogs.com/qiuchuanji/p/8819697.html Vue是一个提供了MVVM风格的双向数据绑定的Javascr

小鱼儿/ 2022年05月23日 08:17/ 0 赞/ 386 阅读

相关 Vue表单及表单绑定

基础用法可以用 `v-model` 指令在表单 `<input>` 及 `<textarea>` 元素上创建双向数据绑定。它会根据控件类型自动

柔情只为你懂/ 2021年09月14日 12:38/ 0 赞/ 543 阅读

相关 Vue表单输入绑定

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

痛定思痛。/ 2021年08月19日 22:15/ 0 赞/ 486 阅读