【02】vue.js — 简易留言板

最新推荐文章于 2024-09-02 20:10:44 发布
最新推荐文章于 2024-09-02 20:10:44 发布
阅读量729 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32629809/article/details/77853457
版权 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="../lib/bootstrap.min.css" />
        <script type="text/javascript" src="../lib/jquery-1.7.2.js" ></script>
        <script type="text/javascript" src="../lib/bootstrap.js" ></script>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>
            window.onload = function(){
                new Vue({
                    el: '#box',
                    data: {
                        myData: [],
                        username: '',
                        age: '',
                        nowIndex: -100,
                        deletePrompt: ''
                    },
                    methods: {
                        add: function(){
                            this.myData.push({
                                name: this.username,
                                age: this.age
                            });
                            this.username = '';
                            this.age = '';
                        },
                        deleteMsg: function(){
                            if(this.nowIndex == -1) {
                                this.myData = [];
                            } else {
                                this.myData.splice(this.nowIndex,1);
                            }
                        },
                        deleteFun: function(data,$index) {
                            if(data == 1) {
                                this.nowIndex = $index;
                                this.deletePrompt='确认删除么?';
                            } else {
                                this.nowIndex = $index;
                                this.deletePrompt='确认删除全部么?';
                            }
                        }
                    }
                });
            }
        </script>
    </head>
    <body>
        <div class="container" id="box">
            <form role="form">
                <div class="form-group">
                    <label for="username">用户名:</label>
                    <input type="text" id="username" class="form-control" placeholder="输入用户名" v-model="username"/>
                </div>
                <div class="form-group">
                    <label for="age">年　龄:</label>
                    <input type="text" id="age" class="form-control" placeholder="输入年龄" v-model="age"/>
                </div>
                <div class="form-group">
                    <input type="button" value="添加" class="btn btn-primary" v-on:click="add()" />
                    <input type="reset" value="重置" class="btn btn-danger" />
                </div>
            </form>
            <hr>
            <table class="table table-bordered table-hover">
                <caption class="h2 text-info">用户信息表</caption>
                <tr class="text-danger">
                    <th class="text-center">序号</th>
                    <th class="text-center">名字</th>
                    <th class="text-center">年龄</th>
                    <th class="text-center">操作</th>
                </tr>
                <tr class="text-center" v-for="item in myData">
                    <td>{{$index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>
                        <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="deleteFun(1,$index)">删除</button>
                    </td>
                </tr>
                <tr v-show="myData.length!=0">
                    <td colspan="4" class="text-right">
                        <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" v-on:click="deleteFun(2,-1)">删除全部</button>
                    </td>
                </tr>
                <tr v-show="myData.length==0">
                    <td colspan="4" class="text-center text-muted">
                        <p>暂无数据....</p>
                    </td>
                </tr>
            </table>
            <!-- 模态框 弹出框 -->
            <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">
                                <span>&times;</span>
                            </button>
                            <h4 class="modal-title">{{deletePrompt}}</h4>
                        </div>
                        <div class="modal-body text-right">
                            <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
                            <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg()">确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

上述代码的效果图如下：
简易留言板效果图1
简易浏览版效果图2

有心博客
关注
Vue.js04之简易留言板设计与实现(基于WebStorm)
autumn_leaf blog
04-03 1629
前面3次都是介绍的Vue.js一些常用的指令，如果大家对常用的指令还不熟悉的，可以查看我之前写的博客，也可以查看Vue的官网，链接为https://cn.vuejs.org/v2/api/,里面的API文档写的非常不错，对于初学者来说能够收获很多。好了，接下来先来展示本次简易留言板的效果图，如下图所示： 我们可以对评论进行增加，也可以进行删除，本次demo不涉及后端知识，全为前端Vue知识的...
element-ui+vue.js 简易留言板
记忆格式化つ
01-11 3061
留言板 添加 重置
vue实现简易留言板（todolist）
01-07
使用bootstrap布局的vue.js入门小demo
vue简易留言板
kgc_sai的博客
08-04 541
window.onload=function(){             new Vue({                 el:'#box',                 data:{                     myData:[],                     username:'',                     age:'',    
vue2中用到了 vuex 实现一个 留言板效果
最新发布
x15514104477的博客
09-02 1392
vue2中用到了 vuex 实现一个 留言板效果;其中有各个部分代码的代码展示以及代码详细解释，保证看完代码后对此案例一目了然
Vue示例项目简易留言板
08-10
Vue 示例项目 · 简易留言板
开源推荐：Vue 示例项目 —— 简易留言板
gitblog_00009的博客
05-14 416
开源推荐：Vue 示例项目 —— 简易留言板 vue-demoVue.js 示例项目 · 简易留言板。本项目拥有完善的文档说明与注释，让您快速上手 Vue.js 开发 SPA。Webpack / ES6 + Babel / Vue Router / (Vue Resource?) / (Vue Validator?) / (Vuex?) —— An Excellent Vue Starter ...
vue实现留言板功能
qq_52937486的博客
04-22 1479
【代码】vue实现留言板功能。
vue-基于vue实现的简易留言板项目.zip
05-04
【Vue.js 简易留言板项目详解】 Vue.js 是一款流行的前端JavaScript框架，以其轻量级、易上手和灵活性而受到开发者的喜爱。在这个基于Vue实现的简易留言板项目中，我们将深入探讨如何利用Vue.js的基本特性来构建一...
Vue.js示例项目·简易留言板。本项目拥有完善的文档说明与注释，让您快速上手Vue.js开发SPA。.zip
10-21
这个“Vue.js示例项目·简易留言板”是一个非常适合初学者实践和理解Vue.js特性的实战项目。通过这个项目，你可以学习到如何利用Vue.js构建一个单一页面应用程序（SPA），并了解其核心概念和基本架构。 首先，让...
Vue.js(一到五总结)-小Demo-留言表
qq_42382404的博客
08-16 696
如果看完了Vue.js入门1-5,就可以很容易的理解这个小Demo,这个Demo我们来模拟一个购物车。 1.首先,我们写一个Demo需要把准备工作做好 1.1创建5个文件,如图: 1.2在index.html中编写如下代码: &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;留言表&amp;lt;/title&amp;gt;
Vuejs示例项目之简易留言板本项目拥有较为完善的文档说明
08-08
Vue.js示例项目之简易留言板。本项目拥有较为完善的文档说明，让您快速上手Vue.js开发SPA。
使用vue实现简单的留言板效果
11-25
使用vue实现简单的留言板效果。
vue实现留言板
weixin_33774883的博客
05-05 4473
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
Vue实现留言板功能
qq_57490170的博客
12-11 1489
答：这个版本具有高度的可定制化，相比使用组件库，样式更灵活。
Vue 留言板
FengYang_的博客
06-03 425
vue基础小结-简易留言板
gaoyangliu的博客
03-16 457
bootstrap+vue简易留言板(todolist): script> window.onload=function(){ new Vue({ el:'#box', data:{ myData:[], u
vue实现留言板的功能_Vue实现简单的留言板
weixin_39955925的博客
12-18 1855
本文实例为大家分享了Vue实现简单的留言板的具体代码，供大家参考，具体内容如下body {/* margin: 0; */padding-left: 10px;}#app{width: 400px;height: auto;}.form-group {margin-top: 10px;}.form-group textarea {resize: none;height: 144px;width: ...
vue2留言板
weixin_33887443的博客
06-09 137
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;智能社——http://www.zhinengshe.com&lt;/title&gt; &lt;meta name="viewpo
利用vue.js实现简易互动式钢琴应用
资源摘要信息:"本项目通过使用Vue.js框架，创建了一个简易的钢琴模拟应用，允许用户通过键盘或者鼠标进行交互，从而弹奏音乐。该应用使用了HTML5的`<audio>`标签来播放音乐，使得用户可以模拟演奏钢琴。此应用的设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值