9-vue语法 v-model双向绑定

v-model 双向绑定

在input、textarea、select元素上创建双向数据绑定我，之前是单向绑定，data中的值绑定到标签中，但是标签中的值不能改变data中的值

除了这几个标签，其他的组件要使用v-model要自定义组件才能用

<template>
  <view>
    <view class="">标题：{{title}}</view>
    <input type="text" v-model="title">
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: "学习",
      }
    },
    methods: {
      
    }
  }
</script>

<style lang="scss">
input{
  border: 1px solid red;
}
</style>

在输入框中输入值，上面的标题也会跟着改变，实际上是data中的值先被改变了，然后标题中的值是从data中来的，通过给标题绑定一个点击事件，然后重新赋值给data也是可以实现同样的效果的

[小案例]

<template>
  <view>
    <view class="out">
      <view class="row">
        <input class="border" type="text" placeholder="请输入姓名" v-model="message.username">
      </view>
      
      <view class="row">
        <input class="border" type="text" placeholder="请输入联系电话" v-model="message.tel">
      </view>
      
      <view class="row">
        <textarea class="border" placeholder="请输入留言内容..." v-model="message.content"></textarea>
      </view>
  
      <view class="row">
        <button type="primary" @click="onClick">提交留言</button>
      </view>
    </view>
    
  </view>
</template>

<script>
  export default {
    data() {
      return { 
        message:{
          username: "",
          tel: "",
          content: ""
        }
      }
    },
    methods:{
      onClick(){
        console.log(this.message);
      }
    }
  }
</script>

<style lang="scss">
  .out {
    padding: 30rpx;
    .row {
      margin-bottom: 10rpx;
    }
    .border {
      border: 1px solid #eee;
      width: 100%;
      min-height: 80rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
    }    
  }
</style>

在界面中输入内容之后，微信开发者工具中就可以接收到输入的数据了