<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Computed-practice</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-for="item in list"> <div> <span style="width: 80px;display: inline-block">{{item.name}}</span> <input type="text" v-model.number="item.price"> <!-- 补充:修饰符 --> <!-- v-model.number(输入的值转化为number) v-model.trim(自动过滤掉输入的首尾空格) v-model.lazy(在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 ,也就是在失去焦点 或者 按下回车键时才更新) --> <!-- 多个修饰符同时使用 <input type="text" v-model.number.lazy="item.price"> --> <!-- 1.0 写法 <input type="text" v-model="item.price" number lazy> 建议看是旧视频的老铁在观看视频的时候,多到官网看一下 --> </div> </div> <span>共计: {{total}}</span> </div> <script> var vm = new Vue({ el:'#app', data:{ list:[{ name:'奶茶', price:16, },{ name:'红茶', price:3, },{ name:'绿茶', price:3 }] }, computed:{ total:function () { console.log(this.list.map(function (value) { return value.price?value.price:0 })); console.log('1111111111'); // 方法一 return this.list.map(function (value) { return value.price?value.price:0 }).reduce(function (previousValue,currentValue) { return currentValue+previousValue }); // 方法二 // var sum = 0; // for (var index in this.list){ // sum = sum+(this.list[index].price?this.list[index].price:0); // // // 说明一下 // // 为什么要对价格进行判断 ? // // 当input中value为空的时候 price='' sum在加的时候会当成字符串拼接 // // } // return sum; } } }) </script> </body> </html>
初学 Vue computed练习、修饰符(number、lazy、trim)
最新推荐文章于 2024-05-25 22:13:17 发布