Vue学习笔记-列表渲染

v-for遍历数组和对象

  <div id="app"> 
            <ul>
                <li v-for='items in movies'>{{items}}</li>
            </ul>
            <ul>
               <li v-for=' value in books' >{{value}}  </li>
           </ul>
           <ul>
               <li v-for='(item, value) of books' >{{value + ': '+item }}  </li>
           </ul>
           <ul>
               <li v-for='(item, value,index) of books' >{{index+'. ' +value+':'+item }}  </li>
           </ul>

           
        </div>
       <script>
           var app = new Vue({
               el:'#app',
               data: {  
                  movies:['歇菜','寄生虫','魅影缝匠','叔叔','小丑','绅士们','饥饿站台','少年与海'],
                  books:
                      {
                          id:1,
                          name:'《82年生的金智英》',
                          data:'2019-9',
                          price:45,
                          count:1,
                      }
               }
              
           }) 
       </script>

v-for绑定key属性

key属性可以用来提升v-for渲染的效率！vue不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去。
在使用v-for的时候，vue里面需要我们给元素添加一个key属性，这个key属性必须是唯一的标识
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute

<div id="app"> 
            <ul>
                <li v-for='(items,index) in movies' :key='index+1'>{{items}}</li>
            </ul>     
        </div>
       <script>
           var app = new Vue({
               el:'#app',
               data: {  
                  movies:['歇菜','寄生虫','魅影缝匠','叔叔','小丑','绅士们','饥饿站台','少年与海'],
               }
              
           }) 
       </script>

数组更新检测

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

• push ( ) //数组尾部插入数据
• pop ( )//数组尾部弹出数据
• shift ( )//数组头部删除数据
• unshift ( )//数组头部插入数据
• splice ( )//插入，删除，替换数据
• sort（）//排序数组
• reverse（）//倒置数组

购物车案例

实现效果：

JS+HTML

 <div id="app"> 
           <div v-if="books.length" >
                <table>
                   <thead>
                       <tr>
                           <td>编号</td>
                           <td>书籍名称</td>
                           <td>日期</td>
                           <td>价格</td>
                           <td>购买数量</td>
                           <td>操作</td>
                       </tr>
                   </thead>
                   <tbody>
                       <tr v-for='(items,index) in books' :key="index">
                           <td> {{items.id}} </td>
                           <td width="200px"> {{items.name}} </td>
                           <td> {{items.data}} </td>
                           <td width="60px"> {{items.price |showprice(items.price)}} </td>
                           <td> 
                                <button @click="items.count--" :disabled= "items.count<=1">-</button> 
                               {{items.count}} 
                               <button @click="items.count++">+</button>  
                           </td>
                           <td width="50px"> <button @click="remove(index)" > 移除 </button> </td> 
                       </tr>
                   </tbody>
               </table>
                          <div class="totalprice">总价格：{{showtotalprice}} </div>
           </div>
           <div v-else class="kong">您的购物车空空如也！</div>
        </div>
       <script>
           var app = new Vue({
               el:'#app',
               data: {  
                  movies:['歇菜','寄生虫','魅影缝匠','叔叔','小丑','绅士们','饥饿站台','少年与海'],
                  books:[
                      {
                          id:1,
                          name:'《82年生的金智英》',
                          data:'2019-9',
                          price:45,
                          count:1,
                      },
                      {
                          id:2,
                          name:'《你当像鸟飞往你的山》',
                          data:'2019-10' ,
                          price:59,
                          count:1,
                      },
                      {
                          id:3,
                          name:'《书店日记》',
                          data:'2019-9' ,
                          price:79,
                          count:1,
                      },
                      {
                          id:4,
                          name:'《时间的秩序》',
                          data:' 2019-6',
                          price:56,
                          count:1,
                      },
                      {
                          id:5,
                          name:'《喜鹊谋杀案》',
                          data:'2019-6',
                          price:69,
                          count:1,
                      },
                  ]
               },
               methods :{
                   remove(index){
                       this.books.splice(index,1);
                   }
               },
               computed: {
                   showtotalprice (){
                       let totalprice1=0
                       for(let i=0;i<this.books.length;i++){
                            totalprice1+=this.books[i].price*this.books[i].count;
                       }
                       return totalprice1;
                   }
               },
               filters: {
                   showprice(price) {
                       return '￥'+price.toFixed(2)

                   }
               }
              
           }) 
       </script>

CSS

 *{
                padding: 0px;
                margin: 0px;
            }
           table {
               margin: 100px auto 10px;
           }
            thead {
                background-color:#a7d8dd ;
                height: 30px;
                color: #5d676e;
                font-size: 15px;
                font-weight: bolder;
                text-align: center;
            }
            thead td {
                height: 35px;
            }
            tbody {
                background-color: #c3d6dd;
                text-align: center;
            }
            tbody td {
                height: 30px;
            }
            .totalprice {
                margin: 5px 430px;
                color: #5d676e;
                text-align: center;
                font-size: 30px;
                font-weight: bolder;
            }
            .kong{
                color: #5d676e;
                text-align: center;
                margin: 100px auto;
                font-size: 30px;
                font-weight: bolder;
            }