的CSSのブートストラップ

ディレクトリ

序文

Vueがまた、いくつかの章を学んだ、と私たちは自分でデモをしたい、この時間は、追加および削除のリストは、すべての最初の、物事が変更確認することができ、我々はブートストラップを使用する必要があり、とても格好良い、私は今ようやく理解し、格好良い、いわゆるれブートストラップCSS、ブートストラップ形、美しい、美しいものの形。これらの格好良いテーブル、フォームの相互作用、そして私たちは、Vueのためのフレームワークを必要としています。

真、ブートストラップの美しさを話すと、Vueのは、彼らとDOMを操作していないことは本当に素晴らしいです、それのレンダリングを見てみましょう

ブートストラッププラグインのダウンロード

スニペットプラグインは、ブートストラップをダウンロードする。これはすぐにブートストラップを書くために私たちを助けることができ、3と4があり、私はバージョン3を使用します

テーブルやパネルブートストラップ

レンダリングを見て、私たちはあなたがブートストラップ公式サイト内のすべてのコンテンツを見つけることができ、これらの事ブートストラップ新しいパネルやテーブルを作成する必要があります

上記Bootstrap3スニペットは、プラグインの後に設置さ

BS3パネルを入力します。主に迅速パネルを作成します

BS3-テーブルを入力します。すぐにテーブルを作成するために縁取られ、テーブルのスタイル多く、あなたが追加したいものを見るために公式サイトに行くことができます。

入力パネルのラベルの一部を書きました

データを増やすと、Vモデルとvに

実際には、これは我々が前にした、とないその二つの入力ボックス、V-modelコマンドを使用して、メソッドをバインドするために、V-上の命令を使用してボタンを追加し、メソッドの内容が書かれている、this.list単純です。プッシュ

データを削除し、インデックスのイベント修飾子を探すために二つの方法

私は、私は削除ボタンを美化することでした、そして、そこのリンクラベル影響する余裕ができない.preventイベント修飾子を使用して、ラベルを使用し、ボタンのCSSのブートストラップを使用し、ここで、、つまり、削除ボタンをデータを削除します。

注意すべき場所がある場合にデータを削除し、あなたが数えインストールデータのインデックスを削除することで、単にIDをitem.id、私たちはIDに基づいてインデックスを見つける必要があり、2つの方法があります

一つは、いくつかの方法で、いくつかの方法も横断しているが、それは本当の来たときに停止させることができ、消去方式リストは、スプライスのリストです。

     this.list.some((item,i)=>{
                    if(item.id==id){
                        this.list.splice(i,1) //删除一个 return true } })

新しい方法は、これは特別なインデックスを見つけることです、findIndexをJS

       var index=this.list.findIndex(item=>{
                    if(item.id==id) return true }) this.list.splice(index,1)

クエリデータ、foreachのフィルタ

このクエリデータは、横断し、フィルタするには、2つの方法があります

、データが新しいリストに追加されたリターンを横断

        var newlist=[]
                 this.list.forEach(item => {
                     if(item.name.indexOf(keywords)!=-1) newlist.push(item) }); return newlist

濾過

    return this.list.filter(item=>{
                    if(item.name.includes(keywords)) return item })

HTMLのすべて

そのため上記のステップバイステップHTMLを追加しましたので、私はちょうどここに掲載のすべてのコードは、これはコピーして直接使用貼り付けることができ、上記の核となるアイデアを言っています。見ために必要とされているコメントを、注意してください

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>蜀云泉</title> <script type="text/javascript" src="../lib/vue-2.6.10.js"></script> <link rel="stylesheet" href="../lib/bootstrap.css"> </head> <body> <!-- 这个div就是MVVM中的V，View --> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">蜀云泉的小列表</h3> </div> <!-- form-inline是文字和输入框在同一行显示，form-control是设置默认宽度width为100% --> <div class="panel-body form-inline"> <label> id:<input type="text" class="form-control" v-model="id"> </label> <label> name:<input type="text" class="form-control" v-model="name"> </label> <input type="button" value="添加" class="btn btn-primary" @click="add"> <label> 查询:<input type="text" class="form-control" v-model="keywords"> </label> </div> </div> <table class="table table-bordered table-hover table-striped"> <thead> <tr> <th>id</th> <th>name</th> <th>creattime</th> <th>operation</th> </tr> </thead> <tbody> <tr v-for="item in search(keywords)" :key="item.id"> <td v-text="item.id"></td> <td v-text="item.name"></td> <td v-text="item.creattime"></td> <td><a href="" @click.prevent="del(item.id)" class="btn btn-danger">删除</a></td> </tr> </tbody> </table> </div> <script> // 这个vm就是MVVM中的VM，ViewModel var vm=new Vue({ el: '#app', // 这个data就是MVVM中的M，Model data: { id:'', name:'', keywords:'', list:[ {id:1,name:"蜀云泉",creattime:new Date().toLocaleString()}, {id:2,name:"许嵩",creattime:new Date().toLocaleString()} ] }, methods: { add(){ this.list.push({id:this.id,name:this.name,creattime:new Date().toLocaleString()}) }, del(id){ // 这里需要注意的是，我们删除id是不对的，因为索引是从0开始的，所以我们要通过id找到索引 // 通过id找到索引的方法有两种，我分别介绍一下 // 方法1：some方法 // this.list.some((item,i)=>{ // if(item.id==id){ // this.list.splice(i,1) // return true // } // }) // 方法2：findindex方法 var index=this.list.findIndex(item=>{ if(item.id==id) return true }) this.list.splice(index,1) }, search(keywords){ // 查询方法也有两种，方法1 // var newlist=[] // this.list.forEach(item => { // if(item.name.indexOf(keywords)!=-1) // newlist.push(item) // }); // return newlist // 方法2 return this.list.filter(item=>{ if(item.name.includes(keywords)) return item }) } } }) </script> </body> </html>

序文