vuejs+bootstrap實現簡易的留言板功能

阿新 • • 發佈：2019-01-20

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery-1.7.2.js"></script>
    <script src="bootstrap.js"></script>
    <script src="vue.js"></script>
    <title>bootstrap+vue簡易留言板</title>
    <script>
    window.onload = function(arguments) {
        new Vue({
            el: '#box',
            data: {
                myData:[],
                username:'',
                age:'',
                nowIndex: -100
            },
            methods:{
                add:function () {
                    this.myData.push({
                        name:this.username,
                        age:this.age
                    })
                    this.username = '';
                    this.age = '';
                },
                deleteMsg:function (n) {
                    if (n == -2) {
                        this.myData=[];
                    } else {
                       this.myData.splice(n,1);
                    }
                }
            }
        })
    }
    </script>
</head>


<body>
    <div class="container" id="box">
        <form action="" role="form">
            <div class="form-group">
                <label for="username">
                    使用者名稱：
                </label>
                <input v-model="username" type="text" id="username" placeholder="請輸入使用者名稱" class="form-control">
            </div>
            <div class="form-group">
                <label for="age">
                    年　齡：
                </label>
                <input v-model="age" type="text" id="age" placeholder="請輸入年齡" class="form-control">
            </div>
            <div class="form-group">
                <input v-on:click="add()" type="button" name="" value="新增" class="btn btn-primary">
                <input type="reset" name="" value="重置" class="btn btn-danger">
            </div>
        </form>
        <hr>
        <table class="table table-bordered table-hover">
            <caption class="text-success">
                <h4>使用者資訊表</h4></caption>
            <thead>
                <tr class="text-info">
                    <th class="text-center">序號</th>
                    <th class="text-center">名字</th>
                    <th class="text-center">年齡</th>
                    <th class="text-center">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in myData" class="text-warning text-center" >
                    <td style="vertical-align:middle">{{$index + 1}}</td>
                    <td style="vertical-align:middle">{{item.name}}</td>
                    <td style="vertical-align:middle">{{item.age}}</td>
                    <td class="text-center">
                        <button class="btn btn-primary btn-sm">新增</button>
                        <button v-on:click="nowIndex = $index" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer">刪除</button>
                    </td>
                </tr>
                <tr>
                    <td v-show="myData.length != 0" colspan="4" class="text-right">
                        <button class="btn btn-danger" data-toggle="modal" data-target="#layer" v-on:click="nowIndex = -2">全部刪除</button>
                    </td>
                </tr>
                <tr v-show="myData.length == 0">
                    <td colspan="4" class="text-center text-muted">
                        <p>暫無資料。。</p>
                    </td>
                </tr>
            </tbody>
        </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>×</span>
                        </button>
                        <h4 class="modal-title">確認刪除麼?</h4>
                    </div>
                    <div class="modal-body text-right">
                        <button class="btn btn-danger btn-sm" data-dismiss="modal">取消</button>
                        <button v-on:click = "deleteMsg(nowIndex)" class="btn btn-primary btn-primary btn-sm" data-dismiss="modal">確定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>


</html>

這就是簡易的留言板功能包括刪除新增全部刪除等功能

js 實現簡易留言板功能

con wid NPU children 標準 element 出錯 hdel focus <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

vuejs+bootstrap實現簡易的留言板功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="bootst

jsp做的一個簡易留言板功能

cti var llb onload 計算 bst image message html 1.先登錄才能留言 2.可以留言 3.可以回復 4.自己寫的留言可以自己刪除 5.留言進行分頁顯示，避免留言只能顯示一部分 1.登錄後會有 2.寫留言提交按鈕在你沒寫東西前是

微信小程序實現簡易留言板

fault .com icon index 們的聽說裏的暫時學習微信小程序現在很火，於是也就玩玩，做了一個簡易的留言板，讓大家看看，你們會說no picture you say a j8 a,好吧先上圖。樣子就是的，功能一目了然，下面我們就貼實現的代碼，首先是H

實現留言板功能

ext lap 方法 .com 輸出解決辦法定義 image aps 留言板登錄界面登錄代碼登錄信息處理代碼登錄處理登錄首頁首頁留言界面查看留言留言處理代碼處理查看留言內容代碼查看留言註意事項及其解決辦法 1.當一個變量需要

php 實現留言板功能

<?php header('content-type:text/html;charset=utf-8'); /* */ date_default_timezone_set('PRC'); $filename="msg.txt"; $msgs=[]; //檢測檔案是否存在 if(file_e

PHP+MySQL實現留言板功能（三）完整版

由於前段時間過於忙碌，加上小編有重灌了電腦系統，一直沒有去復現這個功能，後面復現過程中，程式碼做了一些調整。今天我將完整版的程式碼和sql檔案程式碼整理出來，供各位學習參考。 1.資料庫SQL檔案 index.php <html> <head>

PHP+MySQL實現留言板功能（二）

上次我們做了登陸註冊頁面的前端設計，這一節我們實現登陸和註冊結合上次的登陸註冊頁面，這次我們先實現註冊，那麼，我們就要先寫註冊頁面的後端處理程式碼。我們將其命名為：doregister.php 程式碼如下。 <?php require_once "connet.php"; r

PHP+MySQL實現留言板功能（一）

1.登陸註冊頁面前端設計由於小編第一次寫部落格，加上前端知識還不夠紮實，本文小編著重處理後端，及PHP連線資料庫，實現新增留言，刪除留言功能。話不多說，我們直接上程式碼。登陸頁面設計：我們將其命名為：in

JS原生編寫實現留言板功能

實現這個留言板功能比較簡單，所以先上效果圖：實現使用者留言內容，留言具體時間。 <script> window.onload = function(){ var oMess

MYSQL操作05_留言板功能的實現

實現一個留言板功能，包括以下要點： 1）留言展示開啟留言板載入資料庫中留言 2）最新留言上方展示使用者輸入的最新留言展現在最上方 3）可刪除留言刪除留言呈現動態效果 4）具備分頁器功

Vue之簡易的留言板功能

bubuko pre 簡易 title 一個刪除 image itl 具體實現今天我將帶大家通過Vue的todolist案例來完成一個簡易的網頁留言板! LES‘T GO! 首先我們需要在頁面上搭建一個input文本輸入框,並設置提交按鈕,通過循環指令來完成輸入框的

PHP實現留言板功能例項程式碼

本文例項為大家分享了php留言板的實現思路，供大家參考，具體內容如下： 1.建立一個存放留言資訊的檔名 2.獲取表單中的資料給一個

vue學習筆記第一天-vue.js簡易留言板

fad ima con targe right 彈出框 n) ade ack <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

js簡易留言板

() != date() turn eth create rip eply doc <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

Spring Boot + MyBatis + Thymeleaf實現簡單留言板應用

crud pro 點擊 htm drop lang data cati col Spring Boot + MyBatis + Thymeleaf實現簡單留言板應用本項目主要介紹使用Spring Boot + MyBatis + Thymeleaf + Bootstrap

簡易留言板

img parent rip display inpu round script isp lap 編輯本博客 this.value獲取表單控件值 this.appendChild()為標簽添加子標簽 this.getElementsByTagName()通過標簽名獲取所有

DOM操作相關案例模態對話框,簡易留言板,js模擬選擇器hover,tab選項卡,購物車案例

order 選擇器點擊 ttr 選擇 this 鼠標懸停 pos 清空 1.模態框案例需求：打開網頁時有一個普通的按鈕，點擊當前按鈕顯示一個背景圖，中心並彈出一個彈出框，點擊X的時候會關閉當前的模態框代碼如下： <!DOCTYPE html> &l

Vue中BootStrap實現表格分頁功能（頁碼過多時帶省略號）

1、首先需要在vue-cli專案中配置bootstrap,jquery 2、然後新建vue檔案,如index.vue，index.vue內容如下： 3、配置路由即可執行實現。 <template> <div class="tTable cont

[thinkPHP5專案實戰_30]留言板功能完善

實現的功能：開啟留言本頁面展示留言，並提供留言功能：開啟application/index/controller/Guest.php控制器： Guest.php控制器程式碼 ********************Guest.php控制器程式碼片******************

vuejs+bootstrap實現簡易的留言板功能

相關推薦