【Vue笔记】 v-model指令与v-bind指令区别

v-bind 只能实现数据的单向绑定,从 M 绑定到 V ,无法实现数据的双向绑定。

v-model 指令可以实现表单元素和 Model 中的数据的双向数据绑定
v-model 指令只能运用在表单元素


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script src="./node_modules/vue/dist/vue.js">script>
head>
<body>
    <div id="app">
        <h3>{{msg}}h3>

        
        <input type="text" style="width:300px;" v-bind:value="msg"> 

        
        
        
        <input type="text" style="width:300px;" v-model="msg">
     div>

     <script>
         let vm=new Vue({
             el:'#app',
             data:{
                 msg:'肥肥好可爱啊啊啊'
             }
         })
     script>
body>
html>

【Vue笔记】 v-model指令与v-bind指令区别_第1张图片
【Vue笔记】 v-model指令与v-bind指令区别_第2张图片

你可能感兴趣的:(JS,前端,Vue)