（2）vue计算属性代码练习

最新推荐文章于 2023-02-23 16:20:44 发布

慢慢来的小邵

最新推荐文章于 2023-02-23 16:20:44 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/m0_44946030/article/details/119280612

版权

<!DOCTYPE html>
<!DOCTYPE html>
<html>
    <body>
    <div id="app">
    <!-- 返回一个全名和书的总价格 -->
      <h2>{{this.firstname}} {{this.lastname}}</h2>
      <!-- 1.最简单直接的方式 -->
      <h2>{{fullname}}</h2>
      <!-- 2.用计算属性的方式 -->
      <h2>{{getfullname()}}</h2>
      <!-- 3.用函数的方式 -->
      <!-- 计算属性方式和定义函数方式的区别：
      函数：定义了几次就调用几次函数；
      计算属性：定义了多次会查看计算属性函数里的内容是否有变化，
      没变化直接从缓存中拿数据，相同的定义多次其实只调用了一次。 -->
      <h2>{{totalprice}}</h2>
    </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script> 
        var app=new Vue(
            {el:"#app",
            data:{
            firstname:'shao',
            lastname:'qiudan',
            books:[
            {id:110,name:'深入理解计算机远离',price:119},
            {id:111,name:'我和世界安静地坐着',price:119}
            ]
              
            },
            methods:{
                getfullname:function(){
                 return this.firstname+' '+this.lastname;
             },
                },
            computed:{
            //  插值表达式的属性值实在是太复杂了， 一般用名词表示属性值，不需要调用的时候加()
            // 正常写法，通常set方法不用，因为不想被轻易改变值
            fullname:{
                set:function(newvalue){
                    //从控制台获取到要设置的名字
                    names=newvalue.split(' ');
                    this.firstname=names[0];
                    this.lastname=names[1];
                },
                get:function(){return this.firstname+' '+this.lastname}
            },
            // 简单写法，直接省略set方法
            //  fullname:function(){
            //      return this.firstname+' '+this.lastname;
            //  },

             totalprice:function(){
                 let result=0;
               for(let i=0;i<this.books.length;i++){
                   result+=this.books[i].price;
               }
               return result;
             }
               }
})</script>
    </body>
</html>

慢慢来的小邵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（2）vue计算属性代码练习

<!DOCTYPE html><html> <body> <div id="app">  <h2>{{fullname}}</h2> <h2>{{totalprice}}</h2> </div> <script src="https://cdn.jsdelivr.net
复制链接

扫一扫