Vue中v-model的简单使用

最新推荐文章于 2024-06-01 11:08:39 发布

卖菜的小白

最新推荐文章于 2024-06-01 11:08:39 发布

阅读量1k

点赞数 2

本文链接：https://blog.csdn.net/weixin_47450807/article/details/109295939

版权

在Vue中v-model可以实现双向绑定，最直接的例子就是和表单进行绑定，在接下来的例子都会将v-model和表单进行联系。
什么是双向绑定？双向绑定就是当表单中的数据进行修改，其data中的数据要进行修改，当data中的数据进行修改，标签中的数据也进行了修改。这样了就是双向绑定。
例子1、

<body>
  <div id="app">
    <input type="text" v-model="message">
    <h3>{{message}}</h3>
  </div>
</body>
<script src="../JS/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data:{
      message:"你好呀",
    }
  })
</script>

这里将input中的value值和data中的message进行绑定，当在dom中input标签的value发生改变，message也会发生改变。在控制台将message改变，input的值也会发生改变。类比于如果将input标签改为textare也是可以的。
例子2 绑定radio单选框
代码：

<body>
  <div id="app">
    <label for="male">
      <input type="radio" value="男" id="male" v-model="sex">男
    </label>
    <label for="woman">
      <input type="radio" value="女" id="woman" v-model="sex">女
    </label>
    <h3>您选择的选项是:{{sex}}</h3>
  </div>
</body>
<script src="../JS/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data:{
      sex:'男',
    }
  })
</script>

这里将v-model绑定单选标签，可以通过v-model绑定，从而让input和data中的sex进行连接。就是将value和sex进行对比，比较两者值是否相等，如果相等，则该选选择。由于相等的值只有一个，所以可以不用设置name属性，来设置单一项被选择。
例子3 绑定多选框
①

<body>
  <div id="app">
    <label for="choice">
      <input type="checkbox" id="choice" v-model="change">同意协议
    </label>
    <button v-bind:disabled="!change">下一步</button>
  </div>
</body>
<script src="../JS/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data:{
      change:"true",
    }
  })
</script>

这里实现的是将v-model和checkbox来绑定，当该标签被选择时，button可以点击，当该标签没有被选择时，button不可以被点击。
②

<body>
  <div id="app">
    <input type="checkbox" value="篮球" v-model='hobby'>篮球
    <input type="checkbox" value="足球" v-model='hobby'>足球
    <input type="checkbox" value="羽毛球" v-model='hobby'>羽毛球
    <input type="checkbox" value="乒乓球" v-model='hobby'>乒乓球
    <h3>您所选择的运动是:{{hobby}}</h3>
  </div>
</body>
<script src="../JS/vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      hobby:[],
    }
  })
</script>

这里设置多选，在data中设置一个数组，将数组传给每一个input。
例子4 v-model绑定select

<body>
  <div id='app'>
    <select name="abc" v-model="fruit">
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="西瓜">西瓜</option>
      <option value="柿子">柿子</option>
    </select>
    <h3>您所选择的水果是:{{fruit}}</h3>
  </div>
</body>
<script src="../JS/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data:{
      fruit:'柿子',
    }
  })
</script>

这里将v-model绑定了select，也可以在select中添加一个mutiple来实现多选操作。

v-model中的修饰符

v-model中的修饰符有lazy和number以及trim。

1. lazy的使用

<body>
  <div id="app">
    <input type="text" v-model.lazy="message">
    <h3>{{message}}</h3>
  </div>
</body>
<script src="../JS/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data:{
      message:"你好呀"
    }
  })
</script>

可以理解为懒加载。在前面使用的时候，data中的数据，就会随时跟着输入内容而变化。当加上这个的时候，就会当input失去焦点或者按下回车键的时候，才会更改data中的数据。
2、number的使用

<body>
  <div id="app">
    <input type="number" v-model.number="message">
    <h3>{{typeof(message)}}</h3>
  </div>
</body>
<script src="../JS/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data:{
      message:1111
    }
  })
</script>

当使用number是，可以将其转化成数字类型
3、trim
就是将input中value的前后的空格去掉

<body>
  <div id="app">
    <input type="text" v-model.trim="message">
    <h3>{{message}}</h3>
  </div>
</body>
<script src="../JS/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data:{
      message:'hhhh'
    }
  })
</script>

v-model到此over。( ´▽` )ﾉ再见

卖菜的小白

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue中v-model的简单使用

在Vue中v-model可以实现双向绑定，最直接的例子就是和表单进行绑定，在接下来的例子都会将v-model和表单进行联系。什么是双向绑定？双向绑定就是当表单中的数据进行修改，其data中的数据要进行修改，当data中的数据进行修改，标签中的数据也进行了修改。这样了就是双向绑定。例子1、<body> <div id="app"> <input type="text" v-model="message"> <h3>{{message}}
复制链接

扫一扫