vue中的计算属性computed

最新推荐文章于 2024-07-06 09:04:34 发布

洛洛大芳

最新推荐文章于 2024-07-06 09:04:34 发布

阅读量129

点赞数

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

本文链接：https://blog.csdn.net/DYFNB/article/details/119546959

版权

vue学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属性。

官方是这么阐述的,其实对于我们使涌多了也就不难理解了,就是说你自己定义在vue实例里的属性可以被用来计算然后你再使用,使用的场景也非常多,大多用于你的属性在动态的变化当中会用的很多的,需要计算属性,

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
</head>

<body>
    <div id="vuediv">
    <button @click="reverseMsg">点击查看反转后的msg2</button>
    <div>{{msg2}}</div>
    <hr>
    <div>computed计算后的值:{{reverseMsgComputed}}</div>
    <hr/>
			商品单价:{{goodsPrice}} 
			购买数量<input type="button" value="-" v-on:click="goodsCount-=1" /><input type="text"   v-model:value="goodsCount" size=3 /><input v-on:click="goodsCount+=1" type="button" value="+" />
			<br/>
            <div>总金额为(cpmputed):{{totalPriceComputed}}</div>
            <div>总金额为(method):{{totalPrice()}}</div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#vuediv",
        data() {
            return {
                msg: "1234567890",
                goodsCount: 1,
                goodsPrice: 8888.33,
                msg2: ''
            }
        },
        methods: {
            reverseMsg:function(){
               return this.msg2=this.msg.split('').reverse().join('');
            },
            totalPrice:function(){
                return (this.goodsCount*this.goodsPrice).toFixed(2);
            }
        },
        computed: {
             reverseMsgComputed:function(){
                 return this.msg.split('').reverse().join('');
             },
             totalPriceComputed:function(){
                 return (this.goodsPrice*this.goodsCount).toFixed(2);
             },
             totalPriceByGetSet:{
                 get(){

                 },
                 set(){
                     
                 }
             }
        },
        created:function(){
            alert("create被调用")
        }
    })
</script>
</html>

洛洛大芳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中的计算属性computed

模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属性。官方是这么阐述的,其实对于我们使涌多了也就不难理解了,就是说你自己定义在vue实例里的属性可以被用来计算然后你再使用,使用的场景也非常多,大多用于你的属性在动态的变化当中会用的很多的,需要计算属性,<!DOCTYPE html><html lang="en">&.
复制链接

扫一扫

专栏目录