VUE指令-数据绑定v-model

用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data选项中声明初始值。

VUE框架数据绑定模型(MVVM)

v-model: "xxx" 文本输入框


<!-- 文本输入框<input/> -->

<!-- 格式v-model="变量" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

<div style="font-size: 20px;">

v0.文本输入框</div>

<hr />

<div>

<div>

<input v-model="v0_message" style="font-size: 20px;"></input>

<p>{{v0_message}}</p>

</div>

</div>

</div>

v-model: "xxx" 多行文本输入


<!-- 多行文本输入框<textarea/> -->

<!-- 格式v-model="变量" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

<div style="font-size: 20px;">

v1.多行文本</div>

<hr />

<div>

<div>

<textarea v-model="v0_message" placeholder="place holder text" style="font-size: 20px;"></textarea>

<p>{{v0_message}}</p>

</div>

</div>

</div>

v-model: "xxx" 复选框


<!-- 复选框<input type="checkbox"/> -->

<!-- 格式v-model="变量" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

<div style="font-size: 20px;">

v2.复选框</div>

<hr />

<div>

<div>

<input type="checkbox" v-model="v1_bool" style="font-size: 20px;"></input>

<p>{{v1_bool}}</p>

</div>

</div>

</div>

v-model: "xxx" 多个复选框


<!-- 多个复选框<input type="checkbox"/> -->

<!-- 格式v-model="变量" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

<div style="font-size: 20px;">

v3.多个复选框</div>

<hr />

<div>

<div>

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">

<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames">

<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">

<label for="mike">Mike</label>

<br>

<span>Checked names: {{ checkedNames }}</span>

</div>

</div>

</div>

v-model: "xxx" 单选按钮


<!-- 单选按钮<input type="radio"/> -->

<!-- 格式v-model="变量" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

<div style="font-size: 20px;">

v4.单选按钮</div>

<hr />

<div>

<div>

<input type="radio" id="one" value="One" v-model="picked">

<label for="one">One</label>

<br>

<input type="radio" id="two" value="Two" v-model="picked">

<label for="two">Two</label>

<br>

<span>Picked: {{ picked }}</span>

</div>

</div>

</div>

v-model: "xxx" 选择框


<!-- 选择框<select/> -->

<!-- 格式v-model="变量" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

<div style="font-size: 20px;">

v5.选择框</div>

<hr />

<div>

<div>

<select v-model="selected">

<option disabled value="">请选择</option>

<option>A</option>

<option>B</option>

<option>C</option>

</select>

<span>Selected: {{ selected }}</span>

</div>

</div>

</div>

其他用法

.lazy

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


<!-- 在“change”时而非“input”时更新 -->

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

.number

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


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

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。

.trim

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


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

 

<!DOCTYPE html>
<html style="height: 100%;">

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../lib/vue.v2.5.12.js"></script>
        <title>v-model</title>
    </head>

    <body style="height: 100%;">
        <style>
            .style0 {
                font-size: 25px;
                color: green;
            }

            .style1 {
                background: gold;
            }
        </style>
        <!--
            VUE指令v-model数据绑定指令

            REF:
                http://www.runoob.com/vue2/vue-forms.html
                https://cn.vuejs.org/v2/guide/forms.html
        -->
        <div id="appVue">
            <!-- 选择框<select/> -->
            <!-- 格式v-model="变量" -->
            <div style="height: 150px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v5.选择框</div>
                <hr />
                <div>
                    <div>
                        <select v-model="selected">
                            <option disabled value="">请选择</option>
                            <option>A</option>
                            <option>B</option>
                            <option>C</option>
                        </select>
                        <span>Selected: {{ selected }}</span>
                    </div>
                </div>
            </div>

            <!-- 单选按钮<input type="radio"/> -->
            <!-- 格式v-model="变量" -->
            <div style="height: 150px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v4.单选按钮</div>
                <hr />
                <div>
                    <div>
                        <input type="radio" id="one" value="One" v-model="picked">
                        <label for="one">One</label>
                        <br>
                        <input type="radio" id="two" value="Two" v-model="picked">
                        <label for="two">Two</label>
                        <br>
                        <span>Picked: {{ picked }}</span>
                    </div>
                </div>
            </div>

            <!-- 多个复选框<input type="checkbox"/> -->
            <!-- 格式v-model="变量" -->
            <div style="height: 150px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v3.多个复选框</div>
                <hr />
                <div>
                    <div>
                        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
                        <label for="jack">Jack</label>
                        <input type="checkbox" id="john" value="John" v-model="checkedNames">
                        <label for="john">John</label>
                        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
                        <label for="mike">Mike</label>
                        <br>
                        <span>Checked names: {{ checkedNames }}</span>
                    </div>
                </div>
            </div>

            <!-- 复选框<input type="checkbox"/> -->
            <!-- 格式v-model="变量" -->
            <div style="height: 150px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v2.复选框</div>
                <hr />
                <div>
                    <div>
                        <input type="checkbox" v-model="v1_bool" style="font-size: 20px;"></input>
                        <p>{{v1_bool}}</p>
                    </div>
                </div>
            </div>

            <!-- 多行文本输入框<textarea/> -->
            <!-- 格式v-model="变量" -->
            <div style="height: 150px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v1.多行文本</div>
                <hr />
                <div>
                    <div>
                        <textarea v-model="v0_message" placeholder="place holder text" style="font-size: 20px;"></textarea>
                        <p>{{v0_message}}</p>
                    </div>
                </div>
            </div>

            <!-- 文本输入框<input/> -->
            <!-- 格式v-model="变量" -->
            <div style="height: 150px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v0.文本输入框</div>
                <hr />
                <div>
                    <div>
                        <input v-model="v0_message" style="font-size: 20px;"></input>
                        <p>{{v0_message}}</p>
                    </div>
                </div>
            </div>
        </div>
        <script>
            new Vue({
                    el: "#appVue",
                    data: {
                        selected: ‘‘,
                        picked: ‘‘,
                        checkedNames: [],
                        v1_bool: false,
                        v0_message: "还没输入"
                    }
                }

            )
        </script>
    </body>

</html>

REF:

http://www.runoob.com/vue2/vue-forms.html

https://cn.vuejs.org/v2/guide/forms.html

原文地址：https://www.cnblogs.com/zhen-android/p/8127851.html

时间： 2024-10-07 02:12:04

VUE指令-数据绑定v-model的相关文章

(尚016)Vue指令(11个自带指令+自定义指令)

1.Vue常用指令 1)v:text:更新元素的 textContent 2)v-html:更新元素的 innerHTML 3)v-if:如果为true,当前标签才会输出到页面 4)v-else:如果为false,当前标签才会输出到页面 5)v-show:通过控制display样式来控制显示/隐藏 6)v-for:遍历数组/对象(最终通过列表显示) 7)v-on:绑定事件监听,一般简写为@ 8)v-bind:强制绑定解析表达式,可以省略v-bind,简写为  : 9)v-model:双向数据绑定

vue.js数据绑定

  语法         插值             双大括号:{{text}} {{*text}}之渲染第一次 {{{html}}}        表达式(各种数值,变量,运算符的综合体)              {{value/除数}}              {{三目表达式}}              {{value.split(",")}}          指令              V-前缀的特殊特征,绑定表达式,也就是js表达式和过滤器,当表达式发生的值发生变

Vue指令总结---小白同学必看

今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪吧. v-text :string  用法:更新元素的textContent,更新部分的textContent,需要使用{{Mustache}}插值 v-html: string 用法:更新元素的innerHTML:注意:网站动态渲染任意HTML,容易导致XXS攻击 v-show:any 用法:根据

VUE指令-样式绑定v-bind

样式绑定v-bind 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强.表达式结果的类型除了字符串之外,还可以是对象或数组. v-bind:style <!-- 格式v-bind:style="{ key:value }" --> <!--

vue指令大全~~~

是的,这里有很全的vue指令使用~ 1.简单的vue应用 vue作为一个mvvm框架,想想为什么叫做mvvm? Model是负责数据的存储, View负责页面的展示 Model View 负责业务逻辑处理,对数据加工后视图展示 MVVM的作用是业务逻辑代码与视图代码完全分离,各自的职责更加清晰~ <body> <!--mvvm里面的v--> <div id="app"> {{val}} </div> <script src=&quo

React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑定 * 事件对象: 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象包含着所有与事件有关的信息 * 表单事件: 获取表单的值 * 1.监听表单的改变事件 ---onChange * 2.在改变的事件里面获取表单输入的值 ---event * 3.把表单输入的值赋值给username

第三篇：Vue指令

Vue指令 1.文本指令相关 v-*是Vue指令,会被vue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义) v-text是原样输出渲染内容,渲染控制的标签自身内容会被替换掉( 123 会被num替换) v-html可以解析渲染html语法的内容 <div id="app"> <!-- 插值表达式 --> <p>{{ msg }}</p> <!-- eg:原文本会被msg替换 --&g

angular和vue双向数据绑定

angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值,在写

Vue指令实战：结合bootstrap做一个用户信息输入表格

结合前面的vue指令做了个小例子,用户在表单里面输入用户名和年龄,点击"添加"以后会保存到用户信息表里面 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-