vue单页面应用Demo

怼烎@ 2021-07-25 02:41 440阅读 0赞

**一 实战**

<template>
      <div id="app">
        <ul>
          <li
            v-for="(item,index) in lists"
            :key="index"
            @click="choose(index)"
            :class="{active: index == current && current !==''}"
          >{
       {item}}</li>
        </ul>
        <button @click="add">添加</button>
        <ul>
          <li v-for="(item,index) in target" :key="index">{
       {item}}</li>
        </ul>
      </div>
    </template>
    
    
    <script>
    export default {
      name: "App",
      data() {
        return {
          lists: [1, 2, 3, 4, 5, 6, 7, 8, 9],
          target: [],
          current: ""
        };
      },
      methods: {
        choose(index) {
          this.current = index;
        },
        add() {
          if (this.current === "") return;
          this.target.push(this.lists[this.current]);
          this.current = "";
        }
      }
    };
    </script>
    
    
    <style>
    li.active {
      background: greenyellow;
    }
    </style>

**二 效果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200503150936273.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，440人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue flask mysql,Vue + Flask 实现单页面应用

↑关注 + 星标，每天学Python新技能后台回复【大礼包】送你Python自学大礼 ![aa8c1bbfb3d0e254dd0194a9ae92bc8d.png][]

矫情吗；*/ 2023年01月17日 08:21/ 0 赞/ 108 阅读

相关 SPA，什么是单页面应用，为什么要使用单页面应用，单页面应用有啥好处

说到SPA，很多人只是在使用，不知道为什么使用？别人再用，所以，我也再用，流行，听到了，所以，我用。 SPA--------single page applic

绝地灬酷狼/ 2022年10月02日 14:58/ 0 赞/ 271 阅读

相关 Vue单页面应用

总结如下：单页面应用指一个系统只加载一次资源，然后下面的操作交互、数据交互是通过router、ajax来进行，页面并没有刷新； <1>在vue搭建的

谁践踏了优雅/ 2022年05月26日 04:22/ 0 赞/ 262 阅读

相关 vonic单页面应用

Vonic—基于Vue.js和ionic样式的移动端UI框架先放上源码和demo地址: 　　　　标签演示: [https://wangdahoo.github.i

野性酷女/ 2022年05月21日 01:52/ 0 赞/ 227 阅读

相关构建基于 Vue 的单页面应用 Vue-rap

ue-rap 详细介绍概述 Vue-rap可以在不使用大量前端工具(如npm,webpack,Browserify等)的情况下快速构建基于Vue的秒速打开边用边下载的

怼烎@/ 2022年05月20日 05:16/ 0 赞/ 274 阅读

相关单页面应用——SPA

单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个web页面中，仅

╰半夏微凉°/ 2022年04月22日 12:38/ 0 赞/ 386 阅读

相关 SPA（单页面应用）和MPA（多页面应用）

![Image 1][] 单页面应用 > 第一次进入页面时会请求一个`html`文件，刷新清除一下，切换到其他组件，此时路径也相应变化，但是并没有新的`html`文件请

谁借莪１个温暖的怀抱￠/ 2022年03月29日 14:25/ 0 赞/ 273 阅读

相关 vue单页面应用使用vue-cli的打包问题

使用vue-cli来搭建vue页面可以查看[搭建和配置][Link 1] vue单页面应用vue-cli的打包问题问题1：每个页面按需加载，搭建中访问每个页面都会加

比眉伴天荒/ 2022年02月24日 12:22/ 0 赞/ 212 阅读

相关 SPA（单页面应用）和MPA（多页面应用）

![Image 1][] -------------------- 单页面应用 > 第一次进入页面时会请求一个`html`文件，刷新清除一下，切换到其他组件，此时路径

清疚/ 2021年10月12日 23:24/ 0 赞/ 428 阅读

相关 vue单页面应用Demo

一实战 <template> <div id="app"> <ul> <li v-for="

怼烎@/ 2021年07月25日 02:41/ 0 赞/ 441 阅读