亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

利用vue.js把靜態(tài)json綁定bootstrap的table方法

 更新時間:2018年08月28日 14:37:29   作者:stevennest  
今天小編就為大家分享一篇利用vue.js把靜態(tài)json綁定bootstrap的table方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

直接上代碼

嘻嘻,發(fā)現bootstrap+vue.js拿來做原型效率挺高,以后就這樣做原型

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" type="text/css"  rel="external nofollow" >
 <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
 <script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
</head>
<body>
 <div class="container">

  <!-- start list -->
  <div class="col-md-6 col-md-offset-3">
   <h1>Vue demo</h1>
   <div id="app">
    <table class="table">
     <tr>
      <td><input type="checkbox"></td>
      <td>id</td>
      <td>書名</td>
      <td>作者</td>
      <td>價格</td>
     </tr>
     <tr v-for="book in books ">
      <td>
       <label>
        <input type="checkbox" v-bind:value="book.id" v-model="checkedNames">
       </label>
      </td>
      <td>{{book.id}}</td>
      <td>{{book.name}}</td>
      <td>{{book.author}}</td>
      <td>{{book.price}}</td>
     </tr>
     <tr>
      <td colspan="5">
       <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">add</button>
       <button type="button" class="btn btn-primary" v-on:click="delItems">delete</button>
      </td>
     </tr>
    </table>
    <p>Checked names: {{ checkedNames }}</p>


    <!-- start modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
       </div>
       <div class="modal-body">
        <input class="form-control" placeholder="input id" v-model="book.id">
        <input class="form-control" placeholder="input author" v-model="book.author">
        <input class="form-control" placeholder="input name" v-model="book.name">
        <input class="form-control" placeholder="input price" v-model="book.price">
       </div>
       <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="addItem">Save changes</button>
       </div>
      </div>
     </div>
    </div>
    <!-- end modal -->

   </div>
  </div>
  <!-- end list -->

 </div>
</body>
<script>
 new Vue({
  el: '#app',
  data: {
   book: {
    id: '0',
    author: '',
    name: '',
    price: ''
   },
   checkedNames: [],
   books: [{
    id: '1',
    author: '曹雪芹',
    name: '紅樓夢',
    price: 32.0
   }, {
    id: '2',
    author: '施耐庵',
    name: '水滸傳',
    price: 30.0
   }, {
    id: '3',
    author: '羅貫中',
    name: '三國演義',
    price: 24.0
   }, {
    id: '4',
    author: '吳承恩',
    name: '西游記',
    price: 20.0
   }]
  },
  methods:{
   delItems : function() {
    for (var i = 0 ; i < this.checkedNames.length ; i++) {
     for(var j = 0 ; j < this.books.length ; j++){
      var cur_book = this.books[j];
      if(cur_book.id == this.checkedNames[i]){
       this.books.splice(j,1);
      }
     }
    }
    this.checkedNames = [];
   },
   addItem : function(){
    this.books.push(this.book);
   }
  }
 })
</script>
</html>

以上這篇利用vue.js把靜態(tài)json綁定bootstrap的table方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • vue實現動態(tài)給id賦值,點擊事件獲取當前點擊的元素的id操作

    vue實現動態(tài)給id賦值,點擊事件獲取當前點擊的元素的id操作

    這篇文章主要介紹了vue實現動態(tài)給id賦值,點擊事件獲取當前點擊的元素的id操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • 前端vue中實現文件下載的幾種方法總結

    前端vue中實現文件下載的幾種方法總結

    這篇文章主要介紹了前端vue中實現文件下載的幾種方法總結,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • Vue在頁面右上角實現可懸浮/隱藏的系統(tǒng)菜單

    Vue在頁面右上角實現可懸浮/隱藏的系統(tǒng)菜單

    這篇文章主要介紹了Vue在頁面右上角實現可懸浮/隱藏的系統(tǒng)菜單,實現思路大概是通過props將showCancel這個Boolean值傳遞到子組件,對父子組件分別綁定事件,來控制這個系統(tǒng)菜單的顯示狀態(tài)。需要的朋友可以參考下
    2018-05-05
  • Vue之過濾器詳解

    Vue之過濾器詳解

    這篇文章主要為大家介紹了Vue之過濾器,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助,希望能夠給你帶來幫助
    2021-11-11
  • vue-pdf實現pdf在線預覽并實現自定義預覽框高度

    vue-pdf實現pdf在線預覽并實現自定義預覽框高度

    這篇文章主要介紹了vue-pdf實現pdf在線預覽并實現自定義預覽框高度方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • intellij?idea+vue前端調試配置圖文教程

    intellij?idea+vue前端調試配置圖文教程

    在Vue項目開發(fā)過程中,當遇到應用邏輯出現錯誤,但又無法準確定位的時候,知曉Vue項目調試技巧至關重要,debug是必備技能,這篇文章主要給大家介紹了關于intellij?idea+vue前端調試配置的相關資料,需要的朋友可以參考下
    2024-09-09
  • vue腳手架中配置Sass的方法

    vue腳手架中配置Sass的方法

    本篇文章主要介紹了vue腳手架中配置Sass的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • 基于vue-seamless-scroll實現無縫滾動效果

    基于vue-seamless-scroll實現無縫滾動效果

    這篇文章主要為大家詳細介紹了基于vue-seamless-scroll實現無縫滾動效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • Vue中data數據初始化方法詳解

    Vue中data數據初始化方法詳解

    這篇文章主要介紹了Vue中data數據初始化方法,數據初始化是在組件實例化時發(fā)生的,在組件中,可以通過data選項來定義組件的初始數據,需要詳細了解可以參考下文
    2023-05-05
  • Vue?Router動態(tài)路由實現實現更靈活的頁面交互

    Vue?Router動態(tài)路由實現實現更靈活的頁面交互

    Vue?Router是Vue.js官方的路由管理器,用于構建SPA(單頁應用程序),本文將深入探討Vue?Router的動態(tài)路由功能,希望可以幫助大家更好地理解和應用Vue.js框架
    2024-02-02

最新評論