中input怎么接受后台传值_[vue3]如何在vue3中优雅地使用vmodel？

Vue中的数据绑定

绑定数据有三种方式：

• 插值，也就是{ {name}}的形式，以文本的形式和实例data中对应的属性进行绑定
• v-bind
• v-model

---

v-bind

eg：v-bind:class 可简写为 :class

当加上v-bind:之后，它的值classe不是字符串，而是vue实例对应的data.class的这个变量。也就是说data.class是什么值，它就会给class属性传递什么值，当data.class发生变化的时候，class属性也发生变化，这非常适合用在通过css来实现动画效果的场合。他只是单向变动

v-bind支持的类型

html中的属性、css的样式、对象、数组、number 类型、bool类型

v-bind使用

// 绑定文本
<p v-bind="message">p>

// 绑定属性

<p v-bind:src="http://....">p>
<p v-bind:class="http://....">p>
<p v-bind:style="http://....">p>
// 绑定表达式
:class{className:true}

v-model

v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理

主要是用在表单元素中，它实现了双向绑定。在同时使用v-bind和v-model中，v-model建立的双向绑定对输入型元素input, textarea, select等具有优先权，会强制实行双向绑定。很多时候v-model使用在表单的中实现双向绑定。

v-model实现了表单输入的双向绑定，一般是这么写的：

 <div id="app">
     <input v-model="price">
 div>
<script>new Vue({
     el: '#app',data: {
     price: ''
        }
    });script>

通过该语句实现price变量与输入值双向绑定

实际上v-model只是一个语法糖，真正的实现是这样的：

<input type="text" :value="price" 
      @input="price=$event.target.value">

以上代码分几个步骤：

• 将输入框的值绑定到price变量上，这个是单向绑定，意味着改变price变量的值可以改变input的value，但是改变value不能改变price

• 监听input事件(input输入框都有该事件，当输入内容时自动触发该事件)，当输入框输入内容就单向改变price的值