【郑州校区】前端笔记Vue项目 第3天 6

2、实现 标题和结算功能组件


标题组件实现动态渲染
从父组件把标题数据传递过来 即 父向子组件传值
把传递过来的数据渲染到页面上  
结算功能组件
从父组件把商品列表list 数据传递过来 即 父向子组件传值
把传递过来的数据计算最终价格渲染到页面上  

[AppleScript] 纯文本查看 复制代码

<div id="app">

   <div class="container">

     <my-cart></my-cart>

   </div>

 </div>

 <script type="text/javascript" src="js/vue.js"></script>

 <script type="text/javascript">

    # 2.2  标题组件     子组件通过props形式接收父组件传递过来的uname数据

   var CartTitle = {

     props: ['uname'],

     template: `

       <div class="title">{{uname}}的商品</div>

     `

   }

   # 2.3  商品结算组件  子组件通过props形式接收父组件传递过来的list数据   

   var CartTotal = {

     props: ['list'],

     template: `

       <div class="total">

         <span>总价：{{total}}</span>

         <button>结算</button>

       </div>

     `,

     computed: {

       # 2.4    计算商品的总价  并渲染到页面上 

       total: function() {

         var t = 0;

         this.list.forEach(item => {

           t += item.price * item.num;

         });

         return t;

       }

     }

   }

   Vue.component('my-cart',{

     data: function() {

       return {

         uname: '张三',

         list: [{

           id: 1,

           name: 'TCL彩电',

           price: 1000,

           num: 1,

           img: 'img/a.jpg'

         },{

           id: 2,

           name: '机顶盒',

           price: 1000,

           num: 1,

           img: 'img/b.jpg'

         },{

           id: 3,

           name: '海尔冰箱',

           price: 1000,

           num: 1,

           img: 'img/c.jpg'

         },{

           id: 4,

           name: '小米手机',

           price: 1000,

           num: 1,

           img: 'img/d.jpg'

         },{

           id: 5,

           name: 'PPTV电视',

           price: 1000,

           num: 2,

           img: 'img/e.jpg'

         }]

       }

     },

[AppleScript] 纯文本查看 复制代码

#  2.1  父组件向子组件以属性传递的形式 传递数据      #   向 标题组件传递 uname 属性   向 商品结算组件传递 list  属性  

      template: `

        <div class='cart'>

          <cart-title :uname='uname'></cart-title>

          <cart-list></cart-list>

          <cart-total :list='list'></cart-total>

        </div>

      `,

      components: {

        'cart-title': CartTitle,

        'cart-list': CartList,

        'cart-total': CartTotal

      }

    });

    var vm = new Vue({

      el: '#app',

      data: {

 

      }

    });

 

  </script>

【郑州校区】前端笔记Vue项目 第3天 6

2、实现 标题和结算功能组件


标题组件实现动态渲染
从父组件把标题数据传递过来 即 父向子组件传值
把传递过来的数据渲染到页面上  
结算功能组件
从父组件把商品列表list 数据传递过来 即 父向子组件传值
把传递过来的数据计算最终价格渲染到页面上  

[AppleScript] 纯文本查看 复制代码

<div id="app">

   <div class="container">

     <my-cart></my-cart>

   </div>

 </div>

 <script type="text/javascript" src="js/vue.js"></script>

 <script type="text/javascript">

    # 2.2  标题组件     子组件通过props形式接收父组件传递过来的uname数据

   var CartTitle = {

     props: ['uname'],

     template: `

       <div class="title">{{uname}}的商品</div>

     `

   }

   # 2.3  商品结算组件  子组件通过props形式接收父组件传递过来的list数据   

   var CartTotal = {

     props: ['list'],

     template: `

       <div class="total">

         <span>总价：{{total}}</span>

         <button>结算</button>

       </div>

     `,

     computed: {

       # 2.4    计算商品的总价  并渲染到页面上 

       total: function() {

         var t = 0;

         this.list.forEach(item => {

           t += item.price * item.num;

         });

         return t;

       }

     }

   }

   Vue.component('my-cart',{

     data: function() {

       return {

         uname: '张三',

         list: [{

           id: 1,

           name: 'TCL彩电',

           price: 1000,

           num: 1,

           img: 'img/a.jpg'

         },{

           id: 2,

           name: '机顶盒',

           price: 1000,

           num: 1,

           img: 'img/b.jpg'

         },{

           id: 3,

           name: '海尔冰箱',

           price: 1000,

           num: 1,

           img: 'img/c.jpg'

         },{

           id: 4,

           name: '小米手机',

           price: 1000,

           num: 1,

           img: 'img/d.jpg'

         },{

           id: 5,

           name: 'PPTV电视',

           price: 1000,

           num: 2,

           img: 'img/e.jpg'

         }]

       }

     },

[AppleScript] 纯文本查看 复制代码

#  2.1  父组件向子组件以属性传递的形式 传递数据      #   向 标题组件传递 uname 属性   向 商品结算组件传递 list  属性  

      template: `

        <div class='cart'>

          <cart-title :uname='uname'></cart-title>

          <cart-list></cart-list>

          <cart-total :list='list'></cart-total>

        </div>

      `,

      components: {

        'cart-title': CartTitle,

        'cart-list': CartList,

        'cart-total': CartTotal

      }

    });

    var vm = new Vue({

      el: '#app',

      data: {

 

      }

    });

 

  </script>