计算属性

最新推荐文章于 2022-10-15 09:06:56 发布

该睡觉觉了

最新推荐文章于 2022-10-15 09:06:56 发布

阅读量269

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/zhangyiyang111/article/details/115361179

版权

Vue.js 计算属性模板数据处理业务逻辑

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

计算属性

1.作用

1.当需要处理一些复杂的业务逻辑时,需要用到计算属性.
2.一行表达式无法完成的计算时,需要使用计算属性

2.使用

* 1.计算属性中定义的属性名可以直接显示在视图中

* 2.计算属性值必须要有return

3.计算属性中属性名不能和data中的属性名重叠

书写规范:

 computed:{
     计算属性名:function(){
     	return  操作
     },
 }

<!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>
    <!-- 1.引入vue.js -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.作用域 -->
    <div id="app">
        <div>name的值为:{{name}}</div>
        <div>name取反的值为:{{changeName}}</div>
        <div>a的值为:{{a}}</div>
        <div>计算属性name的值为:{{name}}</div>
        <hr>
        <table border="1" width="500px" style="border-collapse: collapse;">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>分数</th>
            </tr>
            <tr v-for="item in students" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.score}}</td>
            </tr>
        </table>
        <div>
            总分为:{{count}}
        </div>
        <div>
            平均分:{{avg}}
        </div>
    </div>
    <script>
        // 实例化vue
        new Vue({
            el:'#app',
            data:{
                name:'张振6',
                students:[
                    {
                        id:1,
                        name:'王运舵',
                        score:99
                    },
                    {
                        id:2,
                        name:'张振6',
                        score:89
                    },
                    {
                        id:3,
                        name:'赵晨阳',
                        score:99.9
                    },
                    {
                        id:4,
                        name:'郭佳琪',
                        score:90
                    },
                ]
            },
            methods:{},
            // 计算属性
            /**
             * 1.计算属性中定义的属性名可以直接显示在视图中
             * 2.计算属性值必须要有return
             * 3.计算属性中属性名不能和data中的属性名重叠
            */
            computed:{
                changeName:function(){
                  return  this.name.split('').reverse().join('')
                },
                a:function(){
                    return 10
                },
                // 不允许跟data中的属性名重叠
                // name:function(){
                //     return '王运舵'
                // }
                count:function(){
                    let num = 0;
                    this.students.forEach(item=>{
                        num += item.score
                    })
                    return num
                },
                avg:function(){
                    return this.count/this.students.length
                }
            }
        })
    </script>
</body>
</html>

该睡觉觉了

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
计算属性

计算属性1.作用1.当需要处理一些复杂的业务逻辑时,需要用到计算属性.2.一行表达式无法完成的计算时,需要使用计算属性2.使用* 1.计算属性中定义的属性名可以直接显示在视图中* 2.计算属性值必须要有return3.计算属性中属性名不能和data中的属性名重叠书写规范: computed:{ 计算属性名:function(){ return 操作 }, }<!DOCTYPE html><html lang="en">
复制链接

扫一扫

专栏目录