v-model和计算属性和reduce() 方法

最新推荐文章于 2024-03-22 19:45:00 发布

wyf.world

最新推荐文章于 2024-03-22 19:45:00 发布

阅读量686

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/weitunfei/article/details/124754896

版权

1.v-model

数据双向绑定：数据渲染到页面【单向】 + 页面更改数据更新【单向】

data中的属性和页面中能输入和修改的标签进行绑定，通过v-model，这样输入框中的数据【页面发生改变】发生变化，data属性值发生改变

v-model可以绑https://cn.vuejs.org/v2/guide/forms.html定的页面标签：input、textarea、select和自定义组件【components】

表单输入绑定 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/forms.html 代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./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>

2.计算属性

计算属性和侦听器 — Vue.jshttps://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7示例如下：

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

<div id="app">

    <h1>总价：{{getPrice}}元</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;
            }
        }
    });

</script>

</body>
</html>

3.reduce（）方法

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

Array.prototype.reduce() - JavaScript | MDNreduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce实例如下：

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

<div id="app">

    <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: 2
                },
                {
                    name: "牛奶",
                    price: 20,
                    num: 3
                },
                {
                    name: "薯片",
                    price: 30,
                    num: 4
                },
                {
                    name: "可乐",
                    price: 7,
                    num: 12
                },
                {
                    name: "雪碧",
                    price: 7,
                    num: 5
                }

            ]
        },
        methods: {},
        computed: {}
    });

</script>

</body>
</html>

wyf.world

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-model和计算属性和reduce() 方法

1.v-model数据双向绑定：数据渲染到页面【单向】 + 页面更改数据更新【单向】data中的属性和页面中能输入和修改的标签进行绑定，通过v-model，这样输入框中的数据【页面发生改变】发生变化，data属性值发生改变v-model可以绑https://cn.vuejs.org/v2/guide/forms.html定的页面标签：input、textarea、select和自定义组件【components】表单输入绑定 — Vue.jsVue.js - The Progre.
复制链接

扫一扫