vue3的demo练习

资源文件列表(大概)

文件名

大小

study/

study/message.html

541B

__MACOSX/study/._message.html

163B

study/05.v-on.html

902B

__MACOSX/study/._05.v-on.html

163B

study/08.单模块.html

2.61KB

__MACOSX/study/._08.单模块.html

163B

study/06.v-model.html

2.63KB

__MACOSX/study/._06.v-model.html

163B

study/03.v-bind.html

673B

__MACOSX/study/._03.v-bind.html

163B

study/showMessage.js

218B

__MACOSX/study/._showMessage.js

163B

study/04.v-if&v-show.html

1.06KB

__MACOSX/study/._04.v-if&v-show.html

163B

study/07.ajax.html

967B

__MACOSX/study/._07.ajax.html

163B

study/02.v-for.html

2.45KB

__MACOSX/study/._02.v-for.html

163B

study/01.快速入门.html

629B

__MACOSX/study/._01.快速入门.html

163B

资源内容介绍

vue3的demo练习

<!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>

用户评论 (0)

发表评论

您的昵称:

评分

评论内容:

验证码:

vue3的demo练习

资源文件列表(大概)

资源内容介绍

用户评论 (0)

发表评论

相关资源

win11轻松设置软件win更新关闭win关闭防火墙

c++金币题目自制测试点

Idea-Tools插件

飞鸟pdf批量去图片水印1.0