1-8.vue指令：v-model指令

最新推荐文章于 2022-06-09 15:37:47 发布

堵车了

最新推荐文章于 2022-06-09 15:37:47 发布

阅读量389

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45660035/article/details/111059161

版权

vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

1-8.vue指令：v-model指令

v-model的作用

v-model用在表单元素上面，如最常用的text,select,textarea等标签，其主要是与这些表单元素进行双向绑定。双向绑定的含义是当该表单手动改变值或改变绑定元素的值得任意一方发生改变时，这两个都会发生改变。没理解，可以看下面代码展示。

v-model的使用

1.代码展示

<body>
  <div id='app'>
    <label for="text">
      <input type='text' id='text' v-model="message"/>
      <p>{{message}}</p>
    </label>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'v-model指令的演示',
        ishow: true
      },
      methods: {
      }
    });
  </script>

</body>

2.原理分解

在这里插入图片描述

原理解析（讲解到底是怎么实现双向绑定的）

1.代码展示

<body>
  <div id='app'>
    <div>
      <label for="text">
        <input type='text' id='text' v-model="message"/>
        <p>{{message}}</p>
      </label>
    </div>
    <div>
      <label for="text1">
        <input type='text' id='text1' :value="message1" @input='inputChange'/>
        <p>{{message1}}</p>
      </label>
    </div>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'v-model指令的演示',
        message1: 'v-model原理的演示',
        ishow: true
      },
      methods: {
        inputChange(event) {
          console.log("aaa");
          this.message1 =event.target.value;
        }
      }
    });
  </script>

</body>

2.原理分解

在这里插入图片描述

v-model的简单使用

1.在radio中使用

<body>
  <div id='app'>
    <div>
      <label for="male">
        <input type='radio' id='male' value='male' v-model="sex"/> 男
      </label>
      <br/>
      <label for="female">
        <input type='radio' id='female' value='female' v-model="sex"/> 女
      </label>
    </div>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        sex: 'male'
      },
      methods: {
      }
    });
  </script>

</body>

2.在checkbox中使用

<body>
  <div id='app'>
    <div>
      你的爱好是：
      <label for="ball">
        <input type='checkbox' id='ball' value='ball' v-model="hobby"/> 篮球
      </label>
      <label for="rap">
        <input type='checkbox' id='rap' value='rap' v-model="hobby"/> rap
      </label>
      <label for="jump">
        <input type='checkbox' id='jump' value='jump' v-model="hobby"/> 唱跳
      </label>
      <label for="other">
        <input type='checkbox' id='other' value='other' v-model="hobby"/> 其它
      </label>
    </div>
    <P>{{hobby}}</P>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        hobby: []
      },
      methods: {
      }
    });
  </script>

</body>

3.在select中使用

<body>
  <div id='app'>
    <div>
      <select v-model="area">
        <option value="wuhan" >武汉</option>
        <option value="beijing" >北京</option>
        <option value="shanghai" >上海</option>
        <option value="nanjing" >南京</option>
      </select>
    </div>
    <P>{{area}}</P>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        area: 'beijing'
      },
      methods: {
      }
    });
  </script>

</body>

v-model的一些属性

1.lazy

作用是将上面原理的input事件改成change事件。就是当input的值改变时，只有当input失去焦点后message的值才改变，没有做到实时同步，很简单试下就知道了

2.trim

作用就是去掉输入框里面的前后空格，这个一看见大家也都明白是干什么了

3.number

作用就是将输入的字符串转换成数字，这个也简单，大家试下也知道了，就是个类型转换

堵车了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1-8.vue指令：v-model指令

1-8.vue指令：v-model指令v-model的作用v-model用在表单元素上面，如最常用的text,select,textarea等标签，其主要是与这些表单元素进行双向绑定。双向绑定的含义是当该表单手动改变值或改变绑定元素的值得任意一方发生改变时，这两个都会发生改变。没理解，可以看下面代码展示。v-model的使用1.代码展示<body> <div id='app'> <label for="text"> <input t
复制链接

扫一扫