vue computed属性初学

最新推荐文章于 2023-07-11 20:28:05 发布

qq_41073745

最新推荐文章于 2023-07-11 20:28:05 发布

阅读量135

点赞数

分类专栏： Vue学习文章标签： vue

本文链接：https://blog.csdn.net/qq_41073745/article/details/109588899

版权

Vue学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

computed介绍

computed叫做计算属性，实际上是以方法的形式返回属性，而这个属性基本上是需要经过计算的属性，比如某几本书的价格或者某几样东西的数目，可以在datas中设置数组然后通过computed属性计算出想要得到的值来进行操作，理论上来讲这也可以用methods来进行实现，但是computed可以写起来更简单而且是作为一种属性进行传参，可以更好的和方法进行区分（个人理解）

computed的使用

几天没有看vue了，基础东西又忘得差不多了，所以就简单写了一下，顺便学习一下computed属性的使用方法，通过将几个基本操作进行结合来使用了一下。
PS：因为没学过html和css，所以写的不好看，就将就将就，只是computed的简单运用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <ul>
        <li v-for="book in books">
            {{book.id}}---{{book.name}}---{{book.price}}
        </li>
    </ul>
    <label>
        name: <input type="text" v-model="name">
    </label>
    <label>
        price: <input type="text" v-model="price">
    </label>
    <button v-on:click="addBook">增加书籍</button>
    <h2>书的总价格为：{{booksTotalPrice}}</h2>
</div>

<script>
    let app=new Vue({
        el:"#app",
        data:{
            books : [
                {id: 1,name: "浮生六记",price: 20},
                {id: 2,name: "简爱",price: 30},
                {id: 3,name: "狂人日记",price: 25}
            ],
            name:"",
            price:""
        },
        computed:{
            booksTotalPrice:function () {
                let totalPrice = 0;
                for(let i = 0;i<this.books.length;i++){
                    totalPrice+=this.books[i].price;
                }
                return totalPrice;
            }
        },
        methods:{
            addBook: function(){
                this.books.push({id:this.books.length+1,name:this.name,price:parseInt(this.price)});
                this.name="";
                this.price=""
            }
        }
    })
</script>

</body>
</html>

还是得每天学才能有更大得进步啊，得持之以恒，才能走得更远，不过我也发现vue挺好玩的哈哈哈，虽然还是很迷，但可以跟着视频慢慢学，还是学一点算一点嘛，总比打游戏好多了~

qq_41073745

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue computed属性初学

computed介绍computed叫做计算属性，实际上是以方法的形式返回属性，而这个属性基本上是需要经过计算的属性，比如某几本书的价格或者某几样东西的数目，可以在datas中设置数组然后通过computed属性计算出想要得到的值来进行操作，理论上来讲这也可以用methods来进行实现，但是computed可以写起来更简单而且是作为一种属性进行传参，可以更好的和方法进行区分（个人理解）computed的使用几天没有看vue了，基础东西又忘得差不多了，所以就简单写了一下，顺便学习一下computed属性
复制链接

扫一扫

专栏目录