vue2.0排序应该注意的问题

在computed里新声明了一个对象sortItems,如果不重新声明会污染原来的数据源,这是Vue不允许的,所以你要重新声明一个对象。 如果不重新声明报错:
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="vue2.2.js"></script>
        <title>V-for 案例</title>
    </head>

    <body>
        <h1>v-for指令用法</h1>
        <hr>
        <div id="app">
            <ul>
                <li v-for="item in sortItems">
                    {{item}}
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: ‘#app‘,
                data: {
                    items:[20,23,18,65,32,19,54,41]
                },
                computed: {
                    sortItems: function() {
                        return this.items.sort(sortNumber);
                    }
                }
            });
            function sortNumber(a,b) {
                return a - b
            }
        </script>
    </body>

</html>
时间: 2024-10-25 12:49:50

vue2.0排序应该注意的问题的相关文章

vue2.0实践的一些细节

最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个有高度的元素占位,不然当数据加载好渲染的时候会出现跳动的感觉.可以这样写: 1 2 3 4 5 <div class="yhq_inner">  //占位元素 <template v-if="true">  //加template则页面加载时就不

vue2.0学习(一)-内部指令

vue2.0学习(一)-内部指令 GitHub源码 https://github.com/sunnyguyan/VueDemo 1.v-if v-else v-show v-if:是vue的一个内部指令,指令用在我们的html中 v-if用来判断是否加载html的DOM,比如我们模拟一个用户登录状态,在用户登录后现实用户名称 <div v-if='isLogin'>你好,guyan</div> 完整的html代码 <!DOCTYPE html> <html lan

Vue2.0+Node.js+MongoDB 全栈打造商城系统

第1章 课程介绍简单回顾前端近几年的框架模式,了解不同时期下的框架特点.其次介绍Vue框架的背景和核心思想,以及同其它MV*框架的对比.1-1 课程-导学1-2 前端框架回顾1-3 vue概况以及核心思想1-4 vue框架优缺点对比 第2章 Vue基础从0到1,如何搭建一个简单的Vue项目:本章节主要讲解Node和Npm环境的搭建,其次介绍vue-cli脚手架的使用,以及通过详细拆解介绍脚手架生成的配置文件信息,最后给大家介绍了Vue涵盖的基础语法.2-1 nodejs和npm的安装和环境搭建2

Vue.js系列之项目搭建(vue2.0 + vue-cli + webpack )

1.安装node node.js环境(npm包管理器) cnpm npm的淘宝镜像 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装完成之后,打开命令行工具,输入 node -v,如果出现相应的版本号,则说明安装成功. npm包管理器,是集成在node中的,所以,直接输入 npm -v就会显示出npm的版本信息. 2.安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registr

Vue2.0总结———vue使用过程常见的一些问题

Vue目前的的开发模式主要有两种: 1.直接页面级的开发,script直接引入Vue 2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack可以进行配置,配置多文件入口,进行多页面开发 第二种Vue开发,结合webpack打包完文件会很大,怎么解决这个问题? 1.webpack代码拆分:code-spliting 2.提取公共(如提取css,js) 3.预渲染:使用prerender-spa-plugin插件 4.后台----开启压

Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信

Vue2.0与 [百度地图] 结合使用: 1.vue init webpack-simple vue-baidu-map 2.下载axios cnpm install axios; 3.在main.js中引入axios,并使用 import axios from 'axios' /* 把axios对象挂到Vue实例上面,其他组件在使用axios的时候直接 this.$http就可以了 */ Vue.prototype.$http = axios; 4.引入百度地图的js秘钥--->最好在inde

[js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程

在git命令行下,执行以下命令完成环境的搭建: 1,npm install --global vue-cli  安装vue命令行工具 2,vue init webpack vue-demo   使用vue命令生成一个webpack项目,项目名称为vue-demo 3,cd vue-demo 切入项目 4,npm install安装package.json中的所有依赖包 5,npm run dev运行项目 一.父组件向子组件传递数据 然后删除默认的Hello.vue组件,把App.vue整理成以下

项目总结1(微信+vue2.0)

项目总结(vue2.0) 一.基础知识 1.生命周期(项目到用到的) Created:组件实例化创建完成,属性绑定DOM未完成.($el 属性还不存在). Mounted:组件挂在完成,虚拟DOM渲染到html上,mounted知执行一次(从mounted就可以获取到$refs,进行操作). 一般在created或是mounted进行一些ajax操作. updated:组件更新之后,可以获取到DOM节点. 2.数据渲染 v-if:是否创建DOM.一般用在不是频繁创建DOM元素的情况下,否则可用v

vue2.0 之文本渲染-v-html、v-text

vue2.0 之文本渲染-v-html.v-text 1.index.html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vuedemo</title> </head> <body> <div id="app"></div> <!-- built files w