V-model&计算属性

最新推荐文章于 2024-05-16 15:14:51 发布

NAIYAnana

最新推荐文章于 2024-05-16 15:14:51 发布

阅读量3.3k

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/NAIYAnana/article/details/124759737

版权

一、V-model

表单提交是开发中非常常见的功能，也是和用户交互的重要手段：
比如用户在登录、注册时需要提交账号密码；
比如用户在检索、创建、更新信息时，需要提交一些数据；
这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成：
v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../public/js/vue.min.js"></script>
</head>
<body>

    <div id="app">
        <input type="text" v-model="val">
        <button @click="getData">获取数据</button>
        <h1 v-text="value"></h1>
    </div>

    <script>

        new Vue({
            el:"#app",
            data:{
                val:"初始数据",
                value:""
            },
            methods:{
                getData(){
                    this.value = this.val;
                }
            }
        });

    </script>

</body>
</html>

二、计算属性


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../public/js/vue.min.js"></script>
</head>
<body>

<div id="app">

    <h1>总价：{{getPrice}}元</h1>


    <h1>总价：{{array.reduce((s,o)=>{return s + o.price * o.num},0)}}</h1>

</div>

<script>

    new Vue({
        el:"#app",
        data:{
            array:[
                {
                    name:"面包",
                    price:10,
                    num:1
                },
                {
                    name:"牛奶",
                    price:20,
                    num:2
                },
                {
                    name:"薯片",
                    price:20,
                    num:1
                },
                {
                    name:"可乐",
                    price:10,
                    num:1
                },
                {
                    name:"雪碧",
                    price:30,
                    num:1
                }

            ]
        },
        methods:{

        },
        computed:{
            getPrice(){
                // 运算
                /*let prices = 0;
                this.array.forEach((goods)=>{
                    prices += goods.price * goods.num;
                });

                return prices;*/

                /*
                    语法：
                        array.reduce(callback,起始位置);
                    参数一：callback【回调函数】
                    参数二：起始位置
                    s:如果reduce的起始位置指定为0，那么s保存的就是0，
                    当获取第二个数据的时候，s当前保存的是第一次数据的总和
                    o:当前数据
                */
                return this.array.reduce((s,o)=>{
                    return s + o.price * o.num;
                },0);

            }
        }
    });

</script>

</body>
</html>

NAIYAnana

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
V-model&计算属性

一、V-model表单提交是开发中非常常见的功能，也是和用户交互的重要手段：比如用户在登录、注册时需要提交账号密码；比如用户在检索、创建、更新信息时，需要提交一些数据；这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成：v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定；<!DOCTYPE html><html lang="en"><head> <.
复制链接

扫一扫