computed Option 计算选项

最新推荐文章于 2022-11-28 17:18:45 发布

bug的生产者

最新推荐文章于 2022-11-28 17:18:45 发布

阅读量196

点赞数

分类专栏： 3.Vue的选项

3.Vue的选项专栏收录该内容

6 篇文章 0 订阅

订阅专栏

来源于技术胖的视频讲解
计算属性作用：在不污染原始数据的情况下，对数据进行预处理，比如说格式编辑，大小写转换，顺序重排，添加符号等等
1.基本作用实例1
在这里插入图片描述
2.将按照时间顺序正序排列的列表进行倒序排列
效果图

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>computed options</title>
    <script src="../assets/js/vue.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>computed options</h1>
    <hr />
    <div id="app">
      <ul>
          <li v-for="item in revernewsList" >{{item.title}}-----{{item.date}}</li>
      </ul>
    </div>
    <script>
      var newsList = [
        {
          title: "香港或就“装甲车被扣”事件追责 起诉涉事运输公司",
          date: "2017/3/10"
        },
        { title: "日本第二大准航母服役 外媒：针对中国潜艇", date: "2017/3/12" },
        {
          title: "中国北方将有明显雨雪降温天气 南方阴雨持续",
          date: "2017/3/13"
        },
        {
          title: "起底“最短命副市长”：不到40天落马，全家被查",
          date: "2017/3/23"
        }
      ];
      var app = new Vue({
        el: "#app",
        data: {
          newsList:newsList
        },
        computed: {
          revernewsList: function() {
            return this.newsList.reverse()
          }
        }
      });
    </script>
  </body>
</html>

bug的生产者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
computed Option 计算选项

来源于技术胖的视频讲解计算属性作用：在不污染原始数据的情况下，对数据进行预处理，比如说格式编辑，大小写转换，顺序重排，添加符号等等1.基本作用实例12.将按照时间顺序正序排列的列表进行倒序排列效果图代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /...
复制链接

扫一扫

专栏目录