个人中心
gpt4 book ai didi

用vue.js组件模拟v-model指令实例方法

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章用vue.js组件模拟v-model指令实例方法由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

1、问题描述 。

在使用v-model指令实现输入框数据双向绑定，输入值时对应的这个变量的值也随着变化；但是这里不允许使用v-model，需要写一个组件实现v-model指令效果 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
< div id = "user" >
   < input type = "text" v-model = "username" >
   < label >{{username}}</ label >
</ div >
 
< script >
   let v = new Vue({
     el:'#user',
     data:{
      username:'zhangsan'
     }
   })
</ script >

2、实现源码 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
< html >
     < head >
         < meta charset = "utf-8" >
         < title >Vue模拟v-model指令</ title >
         < script src = "../js/vue.js" ></ script >
     </ head >
     < body >
         < div id = "datas" >
             < input-model :value = "num" @ inputchange = "num=arguments[0]" ></ input-model >
             < br >
             < span >
                 {{num}}
             </ span >
         </ div >
         < script >
             Vue.component('input-model',{
                 template:`< input type = "text" :svalue = "cvalue" @ input = "updateInput" >`,
                 computed: {
                     cvalue() {
                         return this.svalue
                     }
                 },
                 props:['svalue'],
                 methods: {
                     updateInput: function(event){
                         let values = event.target.value
                         this.$emit('inputchange',values)
                     }
                 }
             });
            
             let v = new Vue({
                 el:'#datas',
                 data: {
                     num:'1'
                 }
             })
         </ script >
     </ body >
</ html >

3、注意事项 。

（1）父组件中使用子组件，绑定的inputchange必须小写，不能使用inputChange； 。

（2）子组件中的cvalue和计算属性中的要保持一致； 。

（3）子组件中的@input和父组件中的@inputchange没有必然关系； 。

（4）this.$emit('inputchange',values)中的inputchange要和DOM元素中的input-model一致 。

（5）父组件将num值通过props属性传到子组件中；子组件通过$emit触发当前实例上的事件，将改变的值传给父组件 。

内容扩展:

vue.js指令v-model实现方法 。

V-MODEL 是VUE 的一个指令，在input 控件上使用时，可以实现双向绑定.

通过看文档，发现他不过是一个语法糖.

实际是通过下面的代码来实现的:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<%@ page language= "java" contentType= "text/html; charset=utf-8"
  pageEncoding= "utf-8" %>
<!DOCTYPE html>
<html lang= "en" >
<head>
  <meta charset= "UTF-8" >
  <title>Document</title>
  <script type= "text/javascript" src= "vue/vue.js" ></script>
</head>
<body>
  <div id= "app-6" >
  <input :value= "person.name" @input= "person.name = $event.target.value" >
  <input :value= "person.age" @input= "person.age =$event.target.value" >
  {{person}}
  </div>
  <script type= "text/javascript" >
  var app = new Vue({
  el: '#app-6' ,
  data:{
  person:{name: "ray" ,age:19}
  }
  })
  </script>
</body>
</html>

  。

最后此篇关于用vue.js组件模拟v-model指令实例方法的文章就讲到这里了,如果你想了解更多关于用vue.js组件模拟v-model指令实例方法的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： 利用reverse索引优化like语句的方法详解
文章推荐： 女生不露脸的很可爱的快手头像 精选热门的快手女头
文章推荐： SQL注入绕过的技巧总结
文章推荐： 2021最新版微信很可爱的熊猫头像 很有个性的微信头像大全
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com