新建一個 index.html 文件,然后完成以下初步編輯
<div id="app">
<input v-model="inputValue" type="text" />
<button v-on:click="handleAddBtn">提交</button>
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
</div>
通過 script 標簽引入 Vue
<script src="https://cdn.staticfile.org/vue/2.6.2/vue.js"></script>
編輯 js 內容
let app = new Vue({
el: '#app',
data: {
list: ['1', '2'], // 初識值, 也可以不填
inputValue: '' // 和 input 的 inputValue 雙向綁定
},
methods: {
// 添加事件
handleAddBtn() {
this.list.push(this.inputValue)
this.inputValue = ''
}
},
})
效果展示
效果展示
