v-model:双向数据绑定 用于表单元素

1.输入框

html部分

<div id="app">
        <input type="text" v-model="msg" placeholder="请输入内容" />
        <p>您输入的内容是：{{msg}}</p>
            
</div>

js部分

<script>
            new Vue({
                el: '#app',
                data: {
                    msg: '',

                }

            })
</script>

2.添加列表

html部分

<div id='itany'>
            <input type="text" v-model='txt'> <button v-on:click='add'>添加</button>
            <ul>
                <li v-for="(value,index) in arr">
                    {{value}}
                    <button v-on:click='delt(index)'>删除</button>
                </li>
            </ul>
</div>

js部分

<script>
            new Vue({
                el: '#itany',
                data: {
                    arr: ['吃饭', '睡觉', '打游戏'],
                    txt: ''
                },
                methods: {
                    add: function() {
                        this.arr.push(this.txt),
                            this.txt = ''
                    },
                    delt: function(ind) {
                        this.arr.splice(ind, 1)
                    }
                }
            })
</script>