Basic use of calculation attributes

Method of calculating basic attributes computed Calculate attributes the following code demonstrates

html Code

<div id="app">
          <h2>{
   {xing}}</h2>// This is the insertion method 
          <h2>{
   {ming}}</h2>
          <h2>{
   {names()}}</h2><-- Use methods Return value -->
          <h2>{
   {uname}}</h2><-- At this time computed Calculate the return value of the attribute -->
      </div>

js Code

         const vm=new Vue({
                  el:'#app',// mount 
                  data(){// data 
                    return{
                        xing:" Zhang ",
                        ming:' 3、 ... and ',
                       }
                     },
                   methods:{// Use method return value 
                        names(){
                           return this.xing+this.ming 
                        }  
                     },
                     computed:{// Method of calculating basic properties   There must be a return value 
                        uname(){
                           return this.xing+this.ming  
                        }
                     }
             })

The method of calculating complex attributes is shown in the following code demonstration

html Code

​
 <div id="app">
        <h2> Commodity price ：{
   {tatabprice}}</h2>
    </div>

​

js Code

reduce Method to get the value

        const vm=new Vue({
            el:'#app',
            data(){
                return{
                     arr:[
                    {
                       id:1,
                       commodity:" watermelon ",
                       price: 8.9,
                    },{
                       id:2,
                       commodity:' pumpkin ',
                       price: 6.5,
                    },{
                        id:3,
                       commodity:'',
                       price: 7.8,
                    },{
                       id:4,
                       commodity:' Wax gourd ',
                       price: 10.2,
                     }
                  ]
              }
       
            },
                      computed:{
                         /reduce  Method 
                          tatabprice(){
                            return this.arr.reduce((a,b)=>{
                              return a+b.price
                },0)
              }
            }
         })

for...in Method to get the value

        const vm=new Vue({
            el:'#app',
            data(){
                return{
                     arr:[
                    {
                       id:1,
                       commodity:" watermelon ",
                       price: 8.9,
                    },{
                       id:2,
                       commodity:' pumpkin ',
                       price: 6.5,
                    },{
                        id:3,
                       commodity:'',
                       price: 7.8,
                    },{
                       id:4,
                       commodity:' Wax gourd ',
                       price: 10.2,
                     }
                  ]
              }
       
            },
                    computed:{
                     let num=0;
                     for(let index in this.arr){
                      num+=this.arr[index].price;
                 }
                     return num
            }
         })

for...of Method

        const vm=new Vue({
            el:'#app',
            data(){
                return{
                     arr:[
                    {
                       id:1,
                       commodity:" watermelon ",
                       price: 8.9,
                    },{
                       id:2,
                       commodity:' pumpkin ',
                       price: 6.5,
                    },{
                        id:3,
                       commodity:'',
                       price: 7.8,
                    },{
                       id:4,
                       commodity:' Wax gourd ',
                       price: 10.2,
                     }
                  ]
              }
       
            },
                      computed:{
                   let num=0;
                     for(let item of this.arr){
                          num+=item.price;
                }
                   return num
            }
         })

forEach Method

        const vm=new Vue({
            el:'#app',
            data(){
                return{
                     arr:[
                    {
                       id:1,
                       commodity:" watermelon ",
                       price: 8.9,
                    },{
                       id:2,
                       commodity:' pumpkin ',
                       price: 6.5,
                    },{
                        id:3,
                       commodity:'',
                       price: 7.8,
                    },{
                       id:4,
                       commodity:' Wax gourd ',
                       price: 10.2,
                     }
                  ]
              }
       
            },
                 computed:{
                 let num=0;
                this.arr.forEach(item=>{

                    num+=item.price
                 })
                  return num
            }
         })

map Method

        const vm=new Vue({
            el:'#app',
            data(){
                return{
                     arr:[
                    {
                       id:1,
                       commodity:" watermelon ",
                       price: 8.9,
                    },{
                       id:2,
                       commodity:' pumpkin ',
                       price: 6.5,
                    },{
                        id:3,
                       commodity:'',
                       price: 7.8,
                    },{
                       id:4,
                       commodity:' Wax gourd ',
                       price: 10.2,
                     }
                  ]
              }
       
            },
                 computed:{
                 let num=0;
                this.arr.map(item=>{

                    num+=item.price
                 })
                  return num
            }
         })

filter Method

        const vm=new Vue({
            el:'#app',
            data(){
                return{
                     arr:[
                    {
                       id:1,
                       commodity:" watermelon ",
                       price: 8.9,
                    },{
                       id:2,
                       commodity:' pumpkin ',
                       price: 6.5,
                    },{
                        id:3,
                       commodity:'',
                       price: 7.8,
                    },{
                       id:4,
                       commodity:' Wax gourd ',
                       price: 10.2,
                     }
                  ]
              }
       
            },
                 computed:{
                 let num=0;
                this.arr.filter(item=>{

                    num+=item.price
                 })
                  return num
            }
         })