1.vue的购物车效果

<style>

    table{
        width: 600px;
        text-align: center;
    }
 <div class="app"> 
 <table border="2"> 
      <thead> 
          <tr> 
              <th>编号</th> 
              <th>名称</th> 
              <th>单价</th> 
              <th>数量</th> 
              <th>总价</th>
          </tr> 
      </thead>
<tbody> 
       <tr v-for="(value,index) in arr"> 
            <td>{{index+1}}</td> 
            <td>{{value.name}}</td> 
            <td>{{value.price}}</td> 
            <td><button v-on:click="jian(index)">-</button>{{value.num}}<button v-
            on:click="jia(index)">+</button></td> 
           <td>{{value.price*value.num}}</td> 
    </tr> 
    <tr> 
            <td colspan="5">总计:{{arrs}}</td> 
   </tr> 
 </tbody> 
</table> 
 </div> 
<script src="[js/vue.js](js/vue.js)"></script> 
 <script> 
           new Vue({
                el:'.app', 
                data:{ 
                         arr:[  {name:'香蕉',price:1,num:0}, 
                                 {name:'苹果',price:2,num:0}, 
                                 {name:'鸭梨',price:3,num:0} 
                         arrs:0  
                       }, 
               methods:{ 
                  jian:function(ind){ 
                 /*this.arr[ind].num--*/ 
                if(this.arr[ind].num==0){ 
                              this.num=0 
                   }else { 
                      this.arr[ind].num--; 
                      this.arrs-=this.arr[ind].price 
               }   
                }, 
             jia:function(ind){ 
                  this.arr[ind].num++;
                  this.arrs+=this.arr[ind].price 
                  }  
                    } 
               }) 
           /*var a=document.price*num[index]*/ 
 </script> 

2. vue做的选项卡

 <div id="itany"> 
    <table border="1"> 
      <tr> 
      <td v-for="(value,index) in arr" v-on:click="fun(index)"><button >选项{{index+1}}
                </button></td> 
        </tr> 
         <tr> 
             <td>{{url}}</td> 
         </tr>
       </table> 
      </div> 
        <script src="[js/vue.js](js/vue.js)"></script> 
      <script> 
      new Vue({ 
              el:'#itany', 
                    data:{ 
                         arr:["选项一","选项二","选项三"], 
                          url:"选项一", 
                           url1:["选项一","选项二","选项三"] -
                            }, 
               methods:{ 
                       fun:function(dex){ 
                        this.url=this.url1[dex] 
                       } 
                       }
                }) 
</script> 

3.vue做的邮箱

 <link rel="stylesheet" href="[bootstrap-3.3.7-dist/css/bootstrap.css](bootstrap-3.3.7-dist/css/bootstrap.css)"> 
  <style> 
      .app{ 
         width: 1000px; 
     } 
        input{
           width: 1000px; 
      } 
         .but1,.but2{
          width: 100px; 
          border: 0px; 
          background: greenyellow; 
          color: #0f0f0f; 
          margin-top: 40px; 
          margin-bottom: 40px; 
     } 
    .but1{ 
           margin-left: 350px; 
            margin-right: 50px; 
       } 
       table{ 
             width: 1000px; 
             text-align: center; 
      } 
       th { 
            /* text-align: left; */ 
             text-align: center; 
      } 
   </style>