v-model   数据双向绑定

v-model可以绑定的页面标签：input、textarea、select ,v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model，但是 Vue 是单项数据流，v-model 只是语法糖而已。

直接使用在input上

<div id="as">

    <input type="text" v-model="data">

    <p>{{data}}</p>

</div>

<script>

new Vue({

        el:'#as',

        data:{

            data:'',

        }

    })

</script>

输入框中输入什么 下面就会显示什么

用在按钮上并绑定事件

<div id="add">

    <input type="text" v-model="val">

    <button @click="getdata">添加</button>

    <div v-for="(item,index) in value">

        <p>{{index+1}}、{{item}}</p>

    </div>

</div>

<script>

new Vue({

        el:'#add',

        data:{

            val:'',

            value:[]

        },

        methods:{

            getdata(){

                this.value.push(this.val)

            }

        }

    })

</script>

只有点击按钮  触发事件  拿到input框中的内容 给v-model