【免费】vue3的demo练习资源-CSDN文库

共10个文件

html：9个

js：1个

vue.js

需积分: 0 176 浏览量 2024-09-01 16:34:21 上传评论收藏 10KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

study.zip （10个子文件）

study

01.快速入门.html 629B

06.v-model.html 3KB

07.ajax.html 967B

08.单模块.html 3KB

05.v-on.html 902B

showMessage.js 218B

02.v-for.html 2KB

04.v-if&v-show.html 1KB

03.v-bind.html 673B

message.html 541B

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> 文章分类: <input type="text" v-model="searchData.category"/> <span>{{searchData.category}}</span> 发布状态: <input type="text" v-model="searchData.status"/> <span>{{searchData.status}}</span> <button>搜索</button> <button @:click="clear">清空</button> <br /> <br /> <table border="1 solid" colspa="0" cellspacing="0"> <tr> <th>文章标题</th> <th>分类</th> <th>发表时间</th> <th>状态</th> <th>操作</th> </tr> <tr v-for="(article,index) in articleList"> <td>{{article.title}}</td> <td>{{article.category}}</td> <td>{{article.time}}</td> <td>{{article.state}}</td> <td> <button>编辑</button> <button>删除</button> </td> </tr> </table> </div> <script type="module"> //导入vue模块 import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' //创建vue应用实例 createApp({ data() { return { searchData: { category: '', status: '' }, //定义数据 articleList: [{ title: "医疗反腐绝非砍医护收入", category: "时事", time: "2023-09-5", state: "已发布" }, { title: "中国男篮缘何一败涂地？", category: "篮球", time: "2023-09-5", state: "草稿" }, { title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续", category: "旅游", time: "2023-09-5", state: "已发布" }] } }, methods: { clear:function(){ this.searchData.category='', this.searchData.status='' } } }).mount("#app")//控制html元素 </script> </body> </html>

评论收藏

内容反馈