初学 Vue computed练习、修饰符(number、lazy、trim)

最新推荐文章于 2023-10-01 09:00:00 发布

qq_36786909

最新推荐文章于 2023-10-01 09:00:00 发布

阅读量397

点赞数

分类专栏： Vue.js 文章标签： computed .number .lazy .trim

本文链接：https://blog.csdn.net/qq_36786909/article/details/80462556

版权

Vue.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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>共计:&emsp;{{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>

qq_36786909

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学 Vue computed练习、修饰符(number、lazy、trim)

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Computed-practice&lt;/title&gt; &lt;script src="https://cdn.jsdeliv
复制链接

扫一扫