首页 > 其他分享> > vue一个关于v-model的面试题

vue一个关于v-model的面试题

2021-09-19 22:34:00 作者：互联网

题目要求：页面显示一个字符串以空格隔开例如‘天才派大星’，下面设置两个input框，改变input的内容，前一个input框绑定字符串空格前的字符，后一个绑定空格后的字符

图示：

代码如下：

<body>
    <div id="app">
        <h1>{{name}}</h1>
        <!-- <input type="text" v-model='name'> -->
        <!-- v-model ： :value=name  @input name=e.target.value
                当为一个标签绑定v-model属性是，就相当于给当前标签绑定了
                    :value=name  @input= 'name=e.target.value' -->
        <!-- <el-input :value='name' @input='(val)=>name=val'></el-input> -->
        <!-- <el-input v-model='name'></el-input> -->
        <my-input v-model='name'></my-input>
        <my-input2 v-model='name'></my-input2>
    </div>
</body>
</html>

<!--
<template id='el-input'>
  <div>
    自己的input
    <input type="text" :value='value' @input='www'>
    <input type="text" v-model='aaa'>
  </div>
</template>
-->

<template id='my-input'>
  <div>
    <input type="text" v-model='val1'>
    <input type="text" v-model='val2'>
  </div>
</template>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    Vue.component('el-input',{
      template:'#el-input',
      props:['value'],
      methods: {
        www(e){
          this.$emit('input',e.target.value)
        }
      },
      computed: {
        aaa:{
          get(){
            return this.value
          },
          set(val){
            this.$emit('input',val)
          }
        },
        qqq(){
          return this.value + 666
        }
      },
    })
    let myInput = {
      template:'#my-input',
      props:['value'],// value : '天才 派大星'
      computed: {    
        // 这种形式只能获取，而不能改变数值
        // val1(){
        //   return this.value.split(' ')[0]
        // },
        // val2(){
        //   return this.value.split(' ')[1]
        // }
        val1:{
          get(){
            return this.value.split(' ')[0]
          },
          set(val){
            // 当第一个input框放生改变的时候 会触发这个函数
            // 当设置第一个框的值的时候 我们让触发 传进来的input的事件
            this.$emit('input',val + ' ' + this.val2)
          }
        },
        val2:{
          get(){
            return this.value.split(' ')[1]
          },
          set(val){
            // 当第2个input框放生改变的时候 会触发这个函数
            this.$emit('input',this.val1 + ' ' + val)
          }
        }
      },
    }
    使用watch方法监听数据也可以实现效果
    let myInput2 = {
      template:'#my-input',
      props:['value'],// value : '天才 派大星'
      data() {
        return {
          val1:this.value.split(' ')[0],
          val2:this.value.split(' ')[1]
        }
      },
      watch: {
        val1(val){
          this.$emit('input',val + ' ' + this.val2)
        },
        val2(val){
          this.$emit('input',this.val1 + ' ' + val)
        }
      },
    }
    let vm = new Vue({
        el:'#app',
        data:{
            name:"天才 派大星"
        },
        components:{
          myInput,
          myInput2
        }
    });
</script>

标签：面试题,vue,return,val,value,val2,input,model,val1
来源： https://blog.csdn.net/Rossbort/article/details/120385426