1、创建html文件,在其中引入vuejs。<script src='../js/vue.js'></script>vue.js放在js目录下。
2、模板首疏扌熘创建完毕后。在data中创建一个list列表数组对象。 data:{ booksList:['JAVA编程','C++语言','稆糨孝汶;Python编程','Android开发'] }
3、在div内,创建一个ul标签,其中使用v-for创建li标签列表。 <挢旗扦渌;ul> <li v-for="(item,index) in booksList" :key="index">{{item}}</li> </ul>
4、给列表简单添加一些样式。
5、打开浏览器查看页面显示结果。列表中的元素都显示出来了。
6、添加一个按钮,用来操作列表内的元素。<button @click="delBook">删除最后一个元素</button>
7、在methods方法内,定义delBook事件,用来操作书籍列表。
8、打开浏览器,点击按钮【删除最后一个元素】,最后一本书就被删除了。连续点击连续删除。