v-model指令

最新推荐文章于 2022-10-11 09:55:11 发布

bug的生产者

最新推荐文章于 2022-10-11 09:55:11 发布

阅读量151

点赞数

分类专栏： 1.Vue相关指令

1.Vue相关指令专栏收录该内容

8 篇文章 0 订阅

订阅专栏

来源于技术胖的视屏讲解
1.效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190709225601337.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjA5NzY4,size_16,color_FFFFFF,t_70

2.代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>v-model</title>
    <script src="../assets/js/vue.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>v-model实例</h1>
    <hr />
    <div id="app">
        <p>原始文本信息：{{message}}</p>
        <h3>文本框</h3>
        <p>v-model:<input type="text" v-model="message"></p>
        <p>v-model.lazy(延迟加载):<input type="text" v-model.lazy="message"></p>
        <p>v-model.number(文本必须为数字):<input type="number" v-model.number="message"></p>
        <p>v-model.trim(去除首尾空格):<input type="text" v-model.trim="message"></p>
        <hr>
        <h3>文本域</h3>
        <textarea cols="20" role="6" v-model="message"></textarea>
        <hr>
        <h3>多选框绑定一个值</h3>
        <input type="checkbox" id="isTrue" v-model="isTrue">
        <label for="isTrue">{{isTrue}} </label>
        <hr>
        <h3>多选框绑定数组</h3>
        <p>
          <input type="checkbox" id="fanrenfeng" value="fanrenfeng"  v-model="web_names">
          <label for="isTrue">fanrenfeng</label>
          <input type="checkbox" id="fengping" value="fengping" v-model="web_names">
          <label for="isTrue">fengping </label>
          <input type="checkbox" id="anan" value="anan" v-model="web_names">
          <label for="isTrue">anna</label>
        </p>
        <p>{{web_names}}</p>
        <hr>
        <h3>单选框绑定</h3>
        <p>
          <input type="radio" id="one" value="男" v-model="sex">
          <label for="one">男</label>
          <input type="radio" id="two" value="女" v-model="sex">
          <label for="one">女</label>
        </p>
        <p>您选择的是：{{sex}}</p>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'hello world!',
                isTrue:true,
                web_names:[],
                sex:'男'
            }
        })
    </script>
  </body>
</html>