单选总计总价格的实例代码,computed总计属性的使用办法

是因为专门的学业的内需并出于互联网的vue2.0中vue-cli完结全选、单选方案不对劲,本身写了三个简练实用的。就短短的126行代码。

正文实例为大家大饱眼福了Vue.js完毕价格总计器功效的求实代码,供大家参谋,具体内容如下

computed

<template>

  <div>

    <table>

      <tr>

        <td><input type="checkbox" v-model="checkAll">全选({{checkedCount}})</td>

        <td>产品名称</td>

        <td>价格</td>

        <td>数量</td>

      </tr>

      <tr v-for="(item,$index) in lists">

        <td>我被选中<input type="checkbox" :value="item.id" v-model="checked" @click="currClick(item,$index)"></td>

        <td>{{item.productName}}</td>

        <td>{{item.price}}</td>

        <td>{{item.count}}</td>

      </tr>

      <tr>

        总价:{{totalMoney}}

      </tr>

    </table>

  </div>

</template>

<script>

  export default{

    data() {

      return {

        checked:[],

        totalPrice:[],

        lists : [

          {

            productName:'产品1',

            price:'24',

            count:'3',

            id:1

          },

          {

            productName:'产品2',

            price:'25',

            count:'6',

            id:2

          },

          {

            productName:'产品3',

            price:'54',

            count:'7',

            id:3

          }

        ]

      }

    },

    computed:{

      totalMoney:function(item,index){

        let sum = 0;

        for(let i=0;i<this.totalPrice.length;i++){

          sum += this.totalPrice[i];

        };

        return sum;

      },

      checkAll: {

        get: function() {

          return this.checkedCount == this.lists.length;

        },

        set: function(value){

          var _this = this;

          if (value) {  

            this.totalPrice = [];

            this.checked = this.lists.map(function(item) {

              item.checked = true;

              let total = item.price*item.count;

              _this.totalPrice.push(total);

              return item.id

            })

          }else{

            this.checked = [];

            this.totalPrice=[];

            this.lists.forEach(function(item,index){

              item.checked = false;

            });

          }

        }

      },

      checkedCount: {

        get: function() {

          return this.checked.length;

        }

      }

    },

    methods:{

      currClick:function(item,index){

        var _this = this;

        if(typeof item.checked == 'undefined'){

          this.$set(item,'checked',true);

            let total = item.price*item.count;

            this.totalPrice.push(total);

            console.log(this.totalPrice);

        }else{

          item.checked = !item.checked;

          if(item.checked){

            this.totalPrice = [];

            this.lists.forEach(function(item,index){

              if(item.checked){

                let total = item.price*item.count;

                _this.totalPrice.push(total);

              }

            });

          }else{

            this.totalPrice = [];

            this.lists.forEach(function(item,index){

              if(item.checked){

                let total = item.price*item.count;

                _this.totalPrice.push(total);

              }

            });

          }

        }

      }

    }

  }

</script>

<style>

  tr td{

    width:200px;

    background: #eee;

    padding:10px 0;

  }



</style> 

完毕效益:

computed:相当于method,重临function内return的值赋值在html的DOM上。不过多少个{{}}使用了computed,computed内的function也只实行二回。仅当function内涉及到Vue实例绑定的data的值的改观,function才会从新实践,并修改DOM上的内容。

效果:

www.bifa88.com 1

computed和method的对比

www.bifa88.com 2

贯彻代码及注释:

<div id="example">
 {{ message.split('').reverse().join('') }}
</div>

www.bifa88.com 3

<!DOCTYPE html>
<html>
<head>
 <title>价格计算器</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style type="text/css">

 /* 隐藏未编译的数据绑定,直到Vue实例成功加载 */
 [v-cloak]{
  display: none;
 }
 *{
  padding: 0;
  margin: 0;
 }
 body{
  font: 15px/1.3 "微软雅黑";
  color: #545b64;
  text-align: center;
 }
 a, a:visited{
  outline: none;
  color: #389dc1;
 }
 a:hover{
  text-decoration: none;
 }
 section, footer, header, aside, nav{
  display: block;
 }

 /*-------------------------
  The order form
 --------------------------*/

 form{
  background-color: #d5d5d5;
  border-radius: 10px;
  box-shadow: 0 1px 1px #ccc;
  width: 400px;
  padding: 35px 45px;
  margin: 50px auto;
  box-shadow: 1px 0px 20px #f5f5f5;
 }

 form h1{
  color:#fff;
  font-size: 55px;
  font-family: "微软雅黑"
  font-weight: normal;
  line-height:1;
  text-shadow:2px 3px 0 rgba(0,0,0,0.1);
  font-weight: normal;
 }

 form ul{
  list-style:none;
  color:#fff;
  font-size:20px;
  font-weight:bold;
  text-align: left;
  margin:20px 0 15px;
 }

 form ul li{
  padding:15px 30px;
  background-color:#03c03c;
  margin-bottom:10px;
  box-shadow:0 1px 1px rgba(0,0,0,0.1);
  cursor:pointer;
 }

 form ul li span{
  float:right;
 }

 form ul li.active{
  background-color: orange;
 }

 div.total{
  border-top:1px solid rgba(255,255,255,0.5);
  padding:15px 30px;
  font-size:20px;
  font-weight:bold;
  text-align: left;
  color:#fff;
  text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
 }

 div.total span{
  float:right;
 }
 </style>

</head>
<body>

<!-- v-cloak隐藏所有没有编译过的数据绑定,直到vue实例准备好 -->

<form id="main" v-cloak>
 <h1>价格计算器</h1>
 <ul>

  <!-- 循环这个服务数组,分配一个点击句柄,并且设置或移除active class -->
  <li v-for="service in services" v-on:click="toggleActive(service)" v-bind:class="{'active': service.active}">

   <!-- 显示这个数组中每个实体的名称和价格格式化, Vue有一个内置的货币筛选器用于对价格进行 -->

   {{service.name}} {{service.price | currency}}

  </li>
 </ul>

 <div class="total">

  <!-- 计算所有选定商品的总价格,并且格式化为货币显示方式 -->

  总价: {{total() | currency}}
 </div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
<script type="text/javascript">

 // 定义一个常规过滤器currency
 Vue.filter('currency', function(value){
  return '¥' + value.toFixed(2);
 });

 var demo = new Vue({
  el: '#main',
  data: {
   // 定义model属性,view将会循环
   // 通过services数组产生一个li
   // 定义services每一项的元素

   services: [
    {
     name: "网站开发",
     price: 300,
     active: true
    },
    {
     name: "设计",
     price: 400,
     active: false
    },
    {
     name: "一体化整合",
     price: 250,
     active: false
    },
    {
     name: "操作培训",
     price: 220,
     active: false
    }
   ]
  },

  methods: {
   toggleActive: function(s){
    s.active = !s.active;
   },
   total: function(){
    var total = 0;
    this.services.forEach(function(s){
     if(s.active){
      total+=s.price;
     }
    });
    return total;
   }
  }
 });
</script>

</body>
</html>

其一是vue官方网站一贯拿来作为例子的代码。在{{}}能够很实惠的放入单个表达式,不过当二个HTML的DOM里面存在太多的表明式,程序会变得很笨重难于维护。

www.bifa88.com 4

如上正是本文的整体内容,希望对我们的求学抱有帮助,也期望我们多多协助脚本之家。

html

以上正是本文的全体内容,希望对我们的求学抱有支持,也意在大家多多帮衬脚本之家。

你或者感兴趣的稿子:

  • Vue.js达成的总计器功用一体化示例
  • Vue.js天天必学之总结属性computed与$watch
  • Vue
    computed总结属性的运用办法
  • Vue总结属性的选拔
  • Vue.js总括属性computed与watch(5)
  • Vue.js教程之总括属性
  • vue达成轻松实时汇率计算成效
  • vue中总结属性(computed)、methods和watched之间的分歧
  • vue2.0中vue-cli完毕全选、单选总计总价格的实例代码
  • vue中的总计属性的行使和vue实例的法子言传身教
  • vue.js达成的特出总计器/科学计算器效用示例
<div id="app9">
  9、method与computed的区别<br/>
  fullName<br/>
  {{fullName}}<br/>
  fullName2<br/>
  {{fullName}}<br/>
  fullNameMethod<br/>
  {{getFullName()}}<br/>
  fullNameMethod2<br/>
  {{getFullName()}}<br/>
</div>

您也许感兴趣的稿子:

  • Vue.js达成的计算器功效完全示例
  • Vue.js落成价格总计器功效
  • Vue.js每日必学之总结属性computed与$watch
  • Vue
    computed总括属性的运用方式
  • Vue总计属性的采纳
  • Vue.js计算属性computed与watch(5)
  • Vue.js教程之总计属性
  • vue完成轻巧实时汇率总计效率
  • vue中总括属性(computed)、methods和watched之间的区分
  • vue中的总括属性的选择和vue实例的措施言传身教
  • vue.js达成的经文总计器/科学计算器功效示例

js

var app9 = new Vue({
  el: '#app9',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  methods:{
    getFullName:function () {
      console.log("执行了methods")
      return this.firstName+" " +this.lastName;
    }
  },
  computed: {
    fullName: function () {
      console.log("执行了computed")
      return this.firstName + ' ' + this.lastName
    }
  }
})
setTimeout('app9.firstName="Foo2"',3000);

支配台出口的结果

执行了computed
执行了methods
执行了methods
执行了computed
执行了methods
执行了methods 

有鉴于此使用computed,function只会实行三次。当Vue实例中绑定的data数据变动的时候,computed也相对应的只变动壹回。

相同点:在以上代码中,两个p标签都会打字与印刷出一致被反转的Hello。

不同点: 运用了methods的:HTML中,每多少个调用了Vue的methods的主意,都急需进行三回reversedMessage()那么些格局;
而利用computed计算属性的,只进行贰次将结果保存在缓存中。

computed和watch的对比

html

<div id="demo">{{ fullName }}</div>

js

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar',
 fullName: 'Foo Bar'
 },
 watch: {
 firstName: function (val) {
  this.fullName = val + ' ' + this.lastName
 },
 lastName: function (val) {
  this.fullName = this.firstName + ' ' + val
 }
 }
})


var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar'
 },
 computed: {
 fullName: function () {
  return this.firstName + ' ' + this.lastName
 }
 }
})

以上正是本文的全体内容,希望对大家的就学抱有援助,也期望我们多多支持脚本之家。

你也许感兴趣的小说:

  • Vue.js达成的总结器作用一体化示例
  • www.bifa88.com,Vue.js完结价格总计器功效
  • Vue.js每一天必学之总计属性computed与$watch
  • Vue计算属性的选择
  • Vue.js计算属性computed与watch(5)
  • Vue.js教程之总计属性
  • vue完成轻便实时汇率总结作用
  • vue中总计属性(computed)、methods和watched之间的区分
  • vue2.0中vue-cli完结全选、单选总括总价格的实例代码
  • vue中的总括属性的应用和vue实例的措施言传身教
  • vue.js完成的经文计算器/科学总括器作用示例