vue模板1——list detail

淩亂°似流年 2022-06-01 01:08 118阅读 0赞

List.vue

<template>
    	<div>
    		<h1>列表页</h1>
    		<ul>
    			<li v-for="(tmp,index) in list">
    				<button :myData='tmp' @click="jump(index)">{
       {tmp}}</button>
    			</li>
    		</ul>
    	</div>
    </template>
    
    <script>
    	export default{
    		data:function(){
    			return {list:[100,200,300]}
    		},
    		methods:{
    			jump(myIndex){
    				this.$router.push('/myDetail/'+myIndex);
    			}
    		}
    	}
    </script>
    
    <style>
    	ul{
    		color:#FF0000;
    		list-style:none;
    	}
    </style>

Detail.vue

<template>
    	<div>
    		<h1>详情页{
       {myId}}</h1>
    		<button @click="back">返回</button>
    	</div>
    </template>
    
    <script>
    	export default{
    		data:function(){
    			return {myId:''}
    		},
    		created:function(){
    			this.myId=this.$route.params.id;
    		},
    		methods:{
    			back(){
    				this.$router.go(-1);
    			}
    		}
    	}
    </script>

index.js

import Vue from 'vue'
    import Router from 'vue-router'
    import Hello from '@/components/Hello'
    import Test from '@/components/Test'  //别少了/
    import List from '@/components/List'
    import Detail from '@/components/Detail'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          component: List
        },
        {
        	path:'/myList',
        	component:List
        },
        {
        	path:'/myDetail/:id',
        	component:Detail
        }
      ]
    })

发表评论取消回复

表情：

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

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

相关阅读

相关 SEGMENT SHRINK and Details. (Doc ID 242090.1)

PURPOSE ======== In Oracle10g and onwards, we have the option to shrink a segment, w

分手后的思念是犯贱/ 2022年09月18日 12:45/ 0 赞/ 45 阅读

相关 VUE模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的

梦里梦外;/ 2022年09月13日 04:16/ 0 赞/ 174 阅读

相关生成vue模板

1，先安装git（可以不用） 2，安装node（安装node同时自动安装npm了）-如果需要升级npm (npm install npm -g ) 3，可以安装淘宝镜像

Bertha 。/ 2022年06月04日 08:11/ 0 赞/ 186 阅读

相关 vue模板1——list detail

List.vue <template> <div> <h1>列表页</h1> <ul> <li v-for="(tmp

淩亂°似流年/ 2022年06月01日 01:08/ 0 赞/ 119 阅读

相关 Vue_模板语法

1.插值表达式：\{ \{\}\} 2.v-text=“name” ：该指令指向的“name”并不是字符串。它指的一定是JS的表达式 3.v-html: 指向实例中的数据

布满荆棘的人生/ 2022年05月22日 13:20/ 0 赞/ 251 阅读

相关 vue模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。插值： 1：文本最常见的数据绑定形式：使用 \{

柔光的暖阳◎/ 2022年05月10日 05:22/ 0 赞/ 352 阅读

相关创建vue模板

模板： <template> <div> </div> </template>

╰+哭是因爲堅強的太久メ/ 2022年02月28日 16:36/ 0 赞/ 289 阅读

相关 vue--模板语法

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" conte

ゝ一纸荒年。/ 2021年09月29日 06:06/ 0 赞/ 365 阅读

相关 Vue模板语法

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

绝地灬酷狼/ 2021年09月20日 01:10/ 0 赞/ 420 阅读

相关 vue-cli模板

vue-cli是一个项目脚手架工具，它支持通过模板来生成项目结构。执行vue init命令可以指定模板的名字，默认情况下vue-cli会根据传入的模块名字去github中查找模

深碍√TFBOYSˉ_/ 2021年06月24日 16:10/ 0 赞/ 488 阅读