&

vue中form標(biāo)簽遇到的疑問(wèn)，求教前輩解答?。。?/h1>

新人開(kāi)始學(xué)習(xí)VUE，仿照網(wǎng)上的例子實(shí)現(xiàn)了一個(gè)表單生成和刪除的實(shí)例，實(shí)際過(guò)程遇到了一個(gè)問(wèn)題，在html標(biāo)簽代碼內(nèi)我自己額外加了form標(biāo)簽就會(huì)無(wú)法正常運(yùn)行，去掉后就可以，網(wǎng)上的例子是沒(méi)加的。
表單相關(guān)元素不是都應(yīng)該放到from標(biāo)簽內(nèi)嗎？加了form標(biāo)簽反而出錯(cuò)了?。?！
運(yùn)行時(shí)去掉from標(biāo)簽就會(huì)正常

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue "></script>
</head>

<body>
    <div id="frome_table">
        <form>
            <fieldset>
                <legend>vue 實(shí)例</legend>
                <div>
                    <label>name：</label>
                    <input type="text" v-model='new_person.name'>
                </div>
                <div>
                    <label>age：</label>
                    <input type="text" v-model='new_person.age'>
                </div>
                <label>sex：</label>
                <select v-model='new_person.sex'>
                    <option>1111111</option>
                    <option>2222222</option>
                </select>
                <button v-on:click='create_person'>test</button>
            </fieldset>
        </form>
        <table>
            <thead>
                <tr>
                    <th>11</th>
                    <th>11</th>
                    <th>11</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for='person in item'>
                    <td>{{person.name}}</td>
                    <td>{{person.age}}</td>
                    <td>{{person.sex}}</td>
                    <td>
                        <button>del</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: '#frome_table',
        data: {
            new_person: {
                name: '', age: '', sex: ''
            },
            item: [{
                name: 'Jack',
                age: 30,
                sex: 'Male'
            },
            {
                name: 'Jack',
                age: 30,
                sex: 'Male'
            }]
        },
        methods: {
            create_person: function () {
                //alert(1)
                this.item.push(this.new_person)
                this.new_person = { name: '999', age: '999', sex: '999' }
            }
        }
    })

</script>

</html>

回答

編輯回答