网页设计效果图分析西安seo顾问培训
本文主要介绍记事本案例，具体实现记事本的显示、添加、删除、清空功能。
运用到了前面所介绍的各种vue操作
<body><div id="app"><!-- 文本框使用双向绑定，当文本框内容更新，data.content也随之更新 --><input type="text" v-model="data.content"><!-- 1.定义button按钮，并为其添加add方法 转2写add方法 --><button @click="add">添加</button><!-- 5.将修改后的list显示到页面上 --><ul><!-- 6.为li添加v-for循环li --><!-- 当点击添加时 就把添加到数组的内容同样显示在页面上 --><li v-for="(value,index) in data.list">{{ value }}<!-- 7.接下来实现删除效果，在每个li旁边显示删除按钮，删除需要唯一的标识index --><button @click="del(index)">删除</button></li></ul><!-- 11.获取记事本中记录的数量 -->{{ data.list.length }}<!-- 12.最后设置清空记事本的功能,转到13编写clear方法 --><button @click="clear">清空</button></div><script type="module">// 模块化开发import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() { // reactive创建响应式数据const data = reactive({content: "www.baidu.com", // 内容list: ["zzz", "baidu.com"], // 列表})// 2.add方法 将文本框的内容添加到list数组内const add = () => {// 3.将文本框内容push到数组内data.list.push(data.content)console.log(data.list);}// 8.del方法 将文本框的内容添加到list数组内const del = (index) => {// 9.splice(删除的起始索引,删除的数量)data.list.splice(index,1)console.log(data.list)}// 13.clear方法const clear = () => {// 14.只需要将list设置为空数组data.list = []}return {data,// 4.返回add方法add,// 10.返回deldel,// 15.返回clearclear}}}).mount("#app")</script>
</body>
以上为记事本案例。