十五、Vue表单输入绑定

十五、Vue表单输入绑定
强烈推介IDEA2020.2破解激活,IntelliJ IDEA 注册码,2020.2 IDEA 激活码

一.Vue初体验:https://blog.csdn.net/qq_43674132/article/details/104857216

二.Vue条件命令:https://blog.csdn.net/qq_43674132/article/details/104857322

三.Vue循环指令:https://blog.csdn.net/qq_43674132/article/details/104857517

四.Vue处理用户输入:https://blog.csdn.net/qq_43674132/article/details/104857651

五.Vue组件初体验:https://blog.csdn.net/qq_43674132/article/details/104857870

六.Vue实例:https://blog.csdn.net/qq_43674132/article/details/104857953

七.Vue模板语法:https://blog.csdn.net/qq_43674132/article/details/104858009

八.Vue计算属性:https://blog.csdn.net/qq_43674132/article/details/104858068

九.Vue.js侦听器:https://blog.csdn.net/qq_43674132/article/details/104860083

十.Vue.js的class绑定:https://blog.csdn.net/qq_43674132/article/details/104861826

十一.Vue style绑定:https://blog.csdn.net/qq_43674132/article/details/104877107

十二.Vue 条件渲染:https://blog.csdn.net/qq_43674132/article/details/104877177

十三.Vue 列表渲染:https://blog.csdn.net/qq_43674132/article/details/104877393

十四.Vue事件处理:https://blog.csdn.net/qq_43674132/article/details/104878173

十五.Vue表单输入绑定:https://blog.csdn.net/qq_43674132/article/details/104879776

十六.Vue中引用图片:https://blog.csdn.net/qq_43674132/article/details/107043105

Vue表单输入绑定

基础用法

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

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

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件:

  • text 和 textarea 元素使用 value 属性和 input 事件;
  • checkbox 和 radio 使用 checked 属性和 change 事件;
  • select 字段将 value 作为 prop 并将 change 作为事件。

对于需要使用输入法 (如中文、日文、韩文等) 的语言,你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程,请使用 input 事件。

文本

<div id="app">
    <input type="text" v-model="message">
    <div>{
  {message}}</div>
</div>

image.png

image.png

多行文本

<textarea v-model="textarea" cols="30" rows="10"></textarea>
<p style="white-space: pre-line">{
  {textarea}}</p>

image.png

image.png

单个复选框

<input type="checkbox" value="多选" v-model="isRead">
<div>{
  {isRead}}</div>

效果如下图:

image.png

image.png

多个复选框

<input type="checkbox" value="足球" v-model="favorites">足球</input>
<input type="checkbox" value="篮球" v-model="favorites">篮球</input>
<input type="checkbox" value="爬山" v-model="favorites">爬山</input>
<input type="checkbox" value="玩游戏" v-model="favorites">玩游戏</input>
<div>{
  {favorites}}</div>

效果如下图:

image.png

image.png

单选按钮

 <input type="radio" value="男" v-model="gender">男 <input type="radio" value="女" v-model="gender">女
    <div>{
  {gender}}</div>

效果如下图:

image.png

image.png

下拉框

 <select v-model="edu">
        <option value="小学">小学</option>
        <option value="初中">初中</option>
        <option value="高中">高中</option>
    </select>
    <div>{
  {edu}}</div>

效果如下图:

image.png

image.png

下拉框多选

<select v-model="favorites" multiple>
        <option v-for="(f,index) in fs" v-bind:key="index" v-bind:value="f">{
  {f}}</option>
</select>

效果如下图:

image.png

image.png

值绑定

 <input type="checkbox" true-value="yes" false-value="no" v-model="toggle">
    <div>{
  {toggle}}</div>

效果如下图:

image.png

image.png

 

详细代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的表单输入绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--普通文本-->
    <input type="text" v-model="message">
    <div>{
  {message}}</div>
    <hr>
    <!--多行文本-->
    <textarea v-model="textarea" cols="30" rows="10"></textarea>
    <p style="white-space: pre-line">{
  {textarea}}</p>
    <hr>
    <!--单个复选框-->
    <input type="checkbox" value="多选" v-model="isRead">
    <div>{
  {isRead}}</div>
    <hr>
    <!--多个复选框-->
    <input type="checkbox" value="足球" v-model="favorites">足球</input>
    <input type="checkbox" value="篮球" v-model="favorites">篮球</input>
    <input type="checkbox" value="爬山" v-model="favorites">爬山</input>
    <input type="checkbox" value="玩游戏" v-model="favorites">玩游戏</input>
    <div>{
  {favorites}}</div>
    <hr>
    <!--单选按钮-->
    <input type="radio" value="男" v-model="gender">男 <input type="radio" value="女" v-model="gender">女
    <div>{
  {gender}}</div>
    <hr>
    <!--下拉框-->
    <select v-model="edu">
        <option value="小学">小学</option>
        <option value="初中">初中</option>
        <option value="高中">高中</option>
    </select>
    <div>{
  {edu}}</div>
    <hr>
    <!--下拉框多选-->
    <select v-model="favorites" multiple>
        <option v-for="(f,index) in fs" v-bind:key="index" v-bind:value="f">{
  {f}}</option>
    </select>
    <hr>
    <!--值绑定-->
    <input type="checkbox" true-value="yes" false-value="no" v-model="toggle">
    <div>{
  {toggle}}</div>
    <hr>
    <input type="text" v-model.lazy="message">
    <div>message</div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"liqinggang",
            textarea:'',
            isRead:false,
            gender:'',
            favorites:[],
            edu:'小学',
            fs:[
                "足球",
                "篮球",
                "乒乓球"
            ],
            toggle:''
        }
        });
</script>
</body>
</html>
本文来源凌枫zero,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/8025

发表评论