[JavaScript知识库] Vue学习表单v-model

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue学习表单v-model -> 正文阅读

[JavaScript知识库]Vue学习表单v-model

细讲v-model，学了一段时间，笔记没写感觉忘了好多，写一下下给你们分享，如果有问题评论或者私聊哟，aFang敲代码太无聊啦！！

moudle的基本使用

使用v-model实现表单的双向绑定
v-moudle也可以使用在textare
原理：
v-bind綁定一個value屬性
v-on绑定一个input事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单绑定</title>
</head>
<body>
<div id="app">
<!--  <input type="text" v-model ="message">-->
<!--    第二种办法使用哪个两种方法绑定事件-->
<!--    <input type="text" :value="message" v-on:input="valueChange">-->
    <input type="text" :value="message" v-on @input="message= $event.target.value">
 <h2> {{message}}</h2>
</div>
<script src="../vue.js"></script>
<script>
  const app =new Vue({
    el:'#app',
    data:{
      message:'你好呀'
    },
      methods:{
        valueChange(event){
            this.message =event.target.value
        }
      }

  })
</script>
</body>
</html>

input传值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>三种修饰符的使用</title>
</head>
<body>
<div id="model">
  <input type="checkbox" value="qq" v-model="message">qq
  <input type="checkbox" value='Mixin' v-model="message">Mixin
  <input type="checkbox" value="weibo" v-model="message">weibo
  <input type="checkbox" value="skype" v-model="message">skype
  <h1>您的爱好是{{message}}</h1>
  <h1>您的爱好是{{tool}}</h1>

  <label v-for="items in tool" :for="items" >
    <input type="checkbox" :value="items" v-model="message" id="items">{{items}}

  </label>
  <h4>{{message}}</h4>
</div>
<script src="../vue.js"></script>
<script>
  const app = new Vue({
    el:'#model',
    data:{
      tool:['qq','Mixin','weibo','skype'],
      message:[]
    }

  })</script>
</body>
</html>

修饰符的使用

三种修饰符的使用：

v-model.number 只接受数据输入输出
v-model.trim 去除输入的首位部分的空格
v-model.lazy 用户输入完敲回车然后数据再显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三种修饰符的使用</title>
</head>
<body>
<div id="model">

<!--修饰符number-->
   <label>
       <input type="number" value="message" v-model.number="message">{{message}}

   </label>
    <h4>{{message}}{{typeof message}}</h4>
<!--    用戶輸入完再显示v-model.lazy-->
<!--    <label>-->
<!--        <input type="text" value="txt" v-model.lazy="txt">{{txt}}-->

<!--    </label>-->
<!--    <h4>{{txt}}{{typeof txt}}</h4>-->

<!--    自动删除用户输入的内容中的首尾部空格-->
<!--    注意是首尾空格-->
    <label>
        <input type="text" value="txt" v-model.trim="txt">{{txt}}

    </label>
    <h4>{{txt}}{{typeof txt}}</h4>
</div>
<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el:'#model',
        data:{
            txt:'',

message:1
        },

    })</script>
</body>
</html>

select

可以实现单选多选
提示多选需要按住control多选然后多选仅需多加一个multiple

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select</title>
</head>
<body>
<div id="app">
<!--  单选-->
  <select v-model="choice">
    <option value="111">111</option>
    <option value="222" >222</option>
    <option value="333" >333</option>
    <option value="444" >444</option>

  </select>
  <h1>选择是：{{choice}}</h1>
<!--  多选：按住control才可以多选-->
  <select v-model="choices" multiple>
    <option value="111">111</option>
    <option value="222">222</option>
    <option value="333">333</option>
    <option value="444">444</option>
  </select>
  <p>选择是：{{choices}}</p>

</div>
<!--select也是可以做单选也可以做多选-->
<script src="../vue.js"></script>
<script>
  const app =new Vue({
    el:'#app',
    data:{
      choice:'apple',
      choices:[]

    },

  })
</script>

</body>
</html>

radio

用v-model实现表单的双向绑定
v-moudle也可以使用在textare

原理

v-bind綁定一個value屬性
v-on绑定一个input事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单绑定</title>
</head>
<body>
<!--v-module綁定的是同一個的值時候name可以不要（作用是让选项互斥）-->
<div id="app">
  <!--  <input type="text" v-model ="message">-->
  <!--    第二种办法使用哪个两种方法绑定事件-->
  <!--    <input type="text" :value="message" v-on:input="valueChange">-->
<label for="male">
  <input type="radio" id="male" value="男" v-model="sex">男
</label>
  <label for="female" >
    <input type="radio" id="female" value="女" v-model="sex">女

  </label>
  <h2> {{sex}}</h2>
</div>
<script src="../vue.js"></script>
<script>
  const app =new Vue({
    el:'#app',
    data:{
sex:''
    },
    methods:{
      valueChange(event){
        this.message =event.target.value
      }
    }

  })
</script>
</body>
</html>

checkbox

可以实现单选多选，比较简单不做多余的论述
下面的 :disabled="!agreement"就是如果agreement为false就是没有勾选的时候就无法点击这个按钮，这个是这个按钮的一个属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-moudleCheckBox</title>
</head>
<body>
<div id="check">
  <lable for="agree">
    <input type="checkbox" id="agree" v-model="agreement">勾选协议
    <h5>同意就进行下一步：{{agreement}}</h5>
    <button :disabled="!agreement">下面一步 </button>
  </lable>

<!--    <input type="checkbox" id="choice1"  value="説話" v-model="hobbbies">説話-->
<!--    <input type="checkbox" id="choice2" value="唱歌"  v-model="hobbbies">唱歌-->
<!--    <input type="checkbox" id="choice3" value="跳舞" v-model="hobbbies">跳舞-->
<!--    <input type="checkbox" id="choice4" value="写字" v-model="hobbbies">写字-->
<!--<h4>我的愛好有：{{hobbbies}}</h4>-->
</div>
<script src="../vue.js"></script>
<script>
  const app=new Vue({
    el:'#check',
    data:{
      agreement:false
    //  将选项用数组储存起来
    },

  })


</script>

</body>
</html>