vue3.0
挂载方式
<div id="add">
</div>
<script type="text/javascript">
let vm=Vue.createApp({
data(){
return {
name:""
}
}
}).mount("#add");
</script>
vue 2.0
钩子函数
beforeCreate(){} //实例创建完成前
created(){} //实例创建完成
beforeMount(){} //挂载前
mounted(){} //挂载完成
vue 2.0 挂载方式
<div id="add">
</div>
<script type="text/javascript">
let vm=new Vue({
el:"#add",
data(){
return {
msg:""
}
}
});
</script>
事件绑定以及for循环
data里面的数据得加 ：
methods:{
//事件处理函数（函数，方法）
}
computed:{
//计算属性（有缓存）
}
在事件绑定的时候可以用（）来传递参数
@keydown键盘按下
v-bind简写为-->：
<div v-bind:class="classname"></div>--><div :class="classname"></div>
v-on简写为-->@
<button v-on:click="">点击</button>--><button @click="">点击</button>
v-for循环事件
只要用到v-for指令，绑定一个：key属性
key值只能为字符串或数值
key值需要有唯一性
<div id="add">
<ul>
<li v-for="(item,index) in arr" :key="index">item.message</li>
//index是下标，唯一的 所以用来做key值
</ul>
</div>
<script type="text/javascript">
let vm=new Vue({
el:"#add",
data(){
return {
arr: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
}
});
</script>
引用方式
<div id="add">
{{name}}
<div v-html="message"></div>
<img :src="src"/> == <!--<img v-bind:src="src"/>--> //v-bind简写为 ：
{{2+2}} {{2+2>2?"大于2":"小于2"}} //vue自带计算模式
{{no.split("").reverse().join("")}} //反向输出
<a :href="'/info?id='+id">链接</a>
<div v-if="show">显示的模块</div>
<input type="" name="" id="" value="" v-model="esg" /> //数据双向绑定
{{esg}}
</div>
<script type="text/javascript">
let vm=new Vue({
el:"#add",
data(){
return {
name:'张三',
message:'<h1>我嫩跌</h1>',
no:'hello',
src:'img/c2.jpg',
id:1,
show:true,
esg:"aaaaa"
}
}
});
</script>
//vue2.0与vue3.0创建方法不一样，其他的大致相同
//console.log(vm.$data.name);//取值
//console.log(vm.name);//取值
//console.log(vm.$el);
vue显示隐藏(案例)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<button @click="show=!show">隐藏显示</button>
<div v-if="show">hello world</div>
</div>
<script type="text/javascript">
let app=new Vue({
el:"#app",
data(){
return{
show:true
}
}
})
</script>
</body>
</html>
class与style绑定
<div id="add">
<div :class="{a:agle,bg:mybg}">文本文本</div>
<div :class="classname"></div>
<!--动态添加class名字-->
<!--<div :class="obj">文本文本</div>-->
<div :style="styleobj">文本文本</div>
<!--动态添加style-->
<div :style="{color:color}">文本文本</div>
</div>
<script type="text/javascript">
new Vue({
el:'#add',
data(){
return{
agle:true,
mybg:true,
//obj:{a:true,bg:true}
classname:"box",
styleobj:{color:"yellow",backgroundColor:"blue"},
color:'blue'
}
}
})
</script>
Vue – watch 侦听器:
watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="add">
千米：<input type="text" v-model="kmeters" />
米：<input type="text" v-model="meters" />
</div>
<script type="text/javascript">
let vm=new Vue({
el:'#add',
data(){
return {
kmeters:0,
meters:0
}
},
watch:{
kmeters:function(val){
this.meters=val*1000;
},
meters:function(val){
this.kmeters=val/1000;
}
}
})
</script>
</body>
</html>
侦听器时分秒(案例)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="add">
<input type="text" v-model="shi" />时=
<input type="text" v-model="fen" />分=
<input type="text" v-model="miao" />秒
</div>
<script type="text/javascript">
new Vue({
el:'#add',
data(){
return {
shi:0,
fen:0,
miao:0
}
},
watch:{
shi:function(val){
this.fen=val*60;
this.miao=val*3600;
},
fen:function(val){
this.shi=val/60;
this.miao=val*60;
},
miao:function(val){
this.fen=val/60;
this.meters=val/3600;
}
}
})
</script>
</body>
</html>
五秒倒计时(案例)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="add">
<h1 v-if="show">倒计时:00:0{{miao}}</h1>
<h1 v-if="!show">倒计时已结束</h1>
</div>
<script type="text/javascript">
new Vue({
el:'#add',
data(){
return {
miao:5,
show:true
}
},
created(){
let time=setInterval(()=>{
this.miao--;
if (this.miao==0) {
this.show=!this.show;
clearInterval(miao);
}
},1000)
}
})
</script>
</body>
</html>
表格的增删（案例）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue@next.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#add{
width: 700px;
margin:auto;
}
table{
width:600px;
margin:auto;
}
tr{
height: 50px;
}
th{
width: 150px;
}
tr button{
height: 35px;
background-color:#87CEEB;
border-radius: 5px;
border: 0;
color: white;
width: 80px;
}
#btn{
height: 35px;
background-color:#87CEEB;
border-radius: 5px;
border: 0;
color: white;
width: 150px;
float: right;
margin-right: 50px;
}
.box{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
}
.info{
width: 400px;
height: 300px;
line-height: 50px;
position: absolute;
top: 130px;
left:450px;
background-color: white;
padding: 30px;
}
.info input:nth-of-type(1),.info input:nth-of-type(2){
width:200px;
height: 30px;
border: 1px solid #87CEEB;
}
#btn1,#btn2{
width:100px;
height: 35px;
border: 0;
background-color:#87CEEB ;
border-radius: 5px;
margin: 10px;
color: white;
}
#del{
width: 540px;
height: 130px;
background-color: #87CEEB;
color:white;
margin: auto;
padding: 30px;
font-size: 30px;
position: absolute;
left: 383px;
top: 50px;
}
</style>
</head>
<body>
<div id="add">
<table v-if="arr.length>0" border="1" bordercolor="#87CEEB" cellspacing="0" cellpadding="0">
<caption><h2>用户表</h2></caption>
<tr>
<th>用户名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr v-for="(item,i) in arr">
<th v-for="v in item">
{{v}}
</th>
<th><button @click="dele(i)">删除</button></th>
</tr>
</table>
<div id="del" v-else>暂无用户信息</div>
<button id="btn" @click="show=!show">添加用户信息</button>
<div class="box" v-show="show">
<div class="info">
用户名：<input type="text" v-model="ursename" /><br />
年 龄：<input type="text" v-model="urseage" /><br />
性 别：
<input type="radio" name="ljt" id="" value="男" v-model="ursesix"/>男
<input type="radio" name="ljt" id="" value="女" v-model="ursesix"/>女
<br />
<input type="button" name="btn1" id="btn1" value="确定" @click="add"/>
<input type="button" name="btn2" id="btn2" value="取消" @click="show=!show"/>
</div>
</div>
</div>
<script type="text/javascript">
Vue.createApp({
data(){
return{
show:false,
ursename:"",
urseage:"",
ursesix:"",
arr:[{name:"张三",age:13,six:"男"},{name:"李四",age:13,six:"男"},
{name:"王五",age:13,six:"男"}]
}
},
methods:{
dele(i){
let res=confirm("是否删除？");
if (res) {
this.arr.splice(i,1);
}
},
add(){
this.arr.push({name:this.ursename,age:this.urseage,six:this.ursesix});
this.show=false;
}
}
}).mount("#add");
</script>
</body>
</html>
vue渲染及事件处理
v-if：条件不满足将不会在页面上渲染DOM
v-show:不管条件满不满足都会渲染，只是操作DOM显示隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/vue@next.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="add">
<!--
<div v-if="show">条件为true</div>
<div v-else="show">条件为false</div>
<div v-if="name=='小敏'">我是小敏</div>
<div v-else-if="name=='小红'">我是小红</div>
<div v-else-if="name=='小青'">我是小青</div>
<div v-else>不知道是谁</div>
<div v-show="show">v-show</div>
<div v-if="show">v-if</div>
-->
<ul>
<li v-for="(item,i) in qqq">
{{item}}=={{i}}
</li>
</ul>
<ul>
<li v-for="(item,index) in ccc">
姓名：{{item.name}}-->下标{{index}}<br />
年龄：{{item.age}}-->下标{{index}}<br />
职业：{{item.job}}-->下标{{index}}<br />
</li>
</ul>
<!--
遍历数组只有值和下标(item,index)
遍历对象有值，键，下标(item,key,index)
-->
</div>
<script type="text/javascript">
Vue.createApp({
data(){
return{
show:false,
name:"小红",
qqq:["小明","小红","小孩"],
ccc:[{name:"小黄",age:12,job:"程序员"}]
}
}
}).mount("#add");
</script>
</body>
</html>
事件处理（stop capture…）
stop:阻止事件冒泡
capture：事件捕获，可以设置优先级
self：只有元素本身才能触发
Once:只执行一次
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue@next.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="add">
<!--<button @click="count++">点击</button>
<div>{{count}}</div>
<button @click="fn">点击</button>-->
<div @click.self="fn1(1)">
div
<p @click.capture="fn1(2)">
这是P标签
<span @click.stop="fn1(3)">span</span>
</p>
</div>
<a href="http://baidu.com" @click.Prevent="">跳转</a>
<!--
Prevent：阻止默认事件
-->
<input type="text" @keydown.left="fn1(0)"/>
<!--
按键修饰
-->
</div>
<script type="text/javascript">
Vue.createApp({
data(){
return{
count:0
}
},
methods:{
fn(event){
console.log(event.target.tagName);
},
fn1(val){
alert(val);
}
}
}).mount("#add");
</script>
</body>
</html>
表单输入的绑定与修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/vue@next.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="add">
姓名：<input type="text" value="" v-model="admin" /><br />
年龄：<input type="text" value="" v-model="age" /><br />
性别：
<input type="radio" name="six" value="男" v-model="six" />男
<input type="radio" name="six" value="女" v-model="six" />女
爱好：
<input type="checkbox" name="chk" value="睡觉" v-model="aihao" />睡觉
<input type="checkbox" name="chk" value="打游戏" v-model="aihao" />打游戏
<input type="checkbox" name="chk" value="学习" v-model="aihao" />学习
喜欢的运动：
留言：
<button @click="sub">提交</button>
</div>
<script type="text/javascript">
Vue.createApp({
data(){
return{
admin:"",
age:"",
six:"",
aihao:[],
yun:"",
liuyan:""
}
},
methods:{
sub(){
alert("姓名："+this.admin+";\n年龄："+this.age+";\n性别："+this.six+";\n爱好："+this.aihao)
}
}
}).mount("#add");
</script>
</body>
</html>
传值（父传子）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="add">
<myhead a="hello" :b="msg" :num="count"></myhead>
</div>
<script type="text/javascript">
new Vue({
el:"#add",
data(){
return{
msg:"动态来的值",
count:0
}
},
components:{
myhead:{
//父组件通过自定义变量进行传值，子组件通过props进行接收
//props:[{'a':String},'b'],
//{'a':String}要求传值类型（类型只有一种的时候）
props:{
'num':Number,
'a':String,
//'b':Number,
'b':{
type:String,
default:'123456'
}
},
data(){
return{
n:0
}
},
template:"<div><h1>子组件的模板=={{a}}{{b}}{{n}}</h1><button @click='add()'>点击</button></div>",
methods:{
add(){
this.n++;
}
},
created(){
this.n=this.num;
}
}
}
})
</script>
</body>
</html>
传值（子传父）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue@next.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="add">
<myheader @f="getval"></myheader>
<div>{{fmsg}}</div>
</div>
<script type="text/javascript">
//子组件向父组件传值:通过自定义事件进行传值
//1在父组件上定义目定义事件进行值的接收
//2在子组件中定义函数,进行自定义事件的触发
//3、通过系统事件调用函数发起值的传递
let app= Vue.createApp({
data(){
return{
fmsg:""
}
},
methods:{
getval(data){
this.fmsg=data;
console.log(data);
}
}
});
app.component('myheader',{
template:`<div><h1>头部文件</h1><button @click="fn()">点击传值</button></div>`,
data(){
return{
msg:"传给父组件的值"
}
},
methods:{
fn(){
this.$emit('f',123456);
}
}
})
app.mount("#add");
</script>
</body>
</html>
组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="add">
<cook></cook>
<myhead></myhead>
{{msg}}
</div>
<div id="app"><cook></cook></div>
<script type="text/javascript">
//注册自定义组件
Vue.component("cook",{
template:"<h1>这是自定义全局组件</h1>"
})
//全局组件
new Vue({
el:"#add",
data(){
return {
msg:"这是父组件！"
}
},
components:{
myhead:{
template:"<h1>{{msg}}</h1>",
data(){
return {
msg:"这是局部组件！===变量"
}
}//变量传值，template也可以有自己的data
}
}
//局部组件，这个组件只能在当前实例中使用
});
new Vue({
el:"#app",
})
</script>
</body>
</html>
过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="add">
{{msg | a(123)}}
</div>
<script type="text/javascript">
//全局定义过滤器
// Vue.filter('a',function(value){
// if(!value) return '';
// value=value.toString();
// return value.charAt(0).toUpperCase()+value.slice(1);
// })
new Vue({
el:"#add",
data(){
return{
msg:"hello"
}
},
filters:{//局部定义过滤器
a(value,v){
//v:可以传参
if(!value) return '';
value=value.toString();
return value.charAt(0).toUpperCase()+value.slice(1)+v;
}
}
})
</script>
</body>
</html>
混入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="add">
</div>
<script type="text/javascript">
let myMixin={
data(){
return{
msg:"这是混入msg"
}
},
created(){
console.log("这是混入钩子");
},
methods:{
fn(){
return "这是公共方法"
}
}
}
// let component=Vue.extend({
// mixins:[myMixin]
// })
// let com=new component();
new Vue({
el:"#add",
data(){
return{
msg:"这是自身msg"
// msg1:"这是自身msg"换了名字就会访问到上面到混入msg
}
},
mixins:[myMixin],
methods:{
fn(){
return "这是自身方法"
}
},
created(){
console.log("这是自身钩子",this.msg,this.fn());
}
})
</script>
</body>
</html>
自定义指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="add">
{{msg}}
<div v-color="'pink'">文本</div>
<input type="text" name="" id="" value="" v-focus />
</div>
<script type="text/javascript">
//全局自定义指令
// Vue.directive('color',{
// inserted:function(el,binding){
// //el,binding 自定义名字
// el.style.color=binding.value;
// }
// })
new Vue({
el:"#add",
data(){
return{
msg:"你好"
}
},
directives:{//局部自定义指令
'color':{
inserted:function(el,binding){
el.style.color=binding.value;
}
},
'focus':{
inserted(el){
el.focus();
}
}
}
})
</script>
</body>
</html>
路由的基本语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/router.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="add">
<router-link to="/one">首页</router-link>
<router-link to="/two">登录界面</router-link>
<router-view></router-view>
</div>
<script type="text/javascript">
//定义路由组件
const one={template:`<div><h1>首页 </h1></div>`}
const two={template:`<div><h1>管理界面</h1></div>`}
//定义路由规则对象
const routes=[{
path:'/one',
component:one
},{
path:'/two',
component:two
},{
path:'*',
redirect:"/one"
}]
//redirect 默认显示页面
//创建路由对象
const router=new VueRouter({
routes
})
new Vue({
el:"#add",
router,
data(){
return{
}
}
})
</script>
</body>
</html>
子路由
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入vue和vue-router包
注意：必须先引入vue再引入vue-router包-->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/router.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.left{
width: 200px;
height: 70px;
}
li{
list-style: none;
}
.right{
width: 200px;
height: 70px;
position: absolute;
left: 210px;
top: 115px;
}
.left.right{
float: left;
}
.router-link-exact-active{
color: red;
}
a{
text-decoration: none;
font-size: 19px;
}
#add{
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="add">
<router-link to="/one">首页</router-link>
<router-link to="/two">登录界面</router-link>
<router-view></router-view>
</div>
<template id="manage">
<div>
<h1>管理界面</h1>
<div class="left">
<ul>
<li v-for="item in list">
<router-link :to="item.path">{{item.myname}}</router-link>
</li>
</ul>
</div>
<div class="right">
<router-view></router-view>
</div>
</div>
</template>
<script type="text/javascript">
//定义路由组件
const one={template:`<div><h1>首页 </h1></div>`}
const Myuser={template:`<div><h1>用户管理 </h1></div>`}
const good={template:`<div><h1>商品管理 </h1></div>`}
const two={
template:"#manage",
data(){
return{
list:[{
path:"/two/Myuser",
myname:"用户管理"
},{
path:"/two/good",
myname:"商品管理"}
]
}
}
}
//定义路由规则对象
const routes=[{
path:'/one',
name:'one',
component:one
},{
path:'/two',
name:'two',
component:two,
children:[{
path:"/two/Myuser",
component:Myuser
},{
path:"/two/good",
component:good
}]
},{
path:'*',
redirect:"/one"
}]
//创建路由对象
const router=new VueRouter({
routes
})
new Vue({
el:"#add",
router,
data(){
return{
}
}
})
</script>
</body>
</html>
vue手脚架
vue2.0
安装 npm install(简写：i) vue-cli -g(全局安装)
创建文件 vue init webpack xxx(文件名)
启动项目 npm run dev
vue3.0
安装 npm i -g(全局安装) @vue/cli -init(若之前下载了vue2，可以覆盖vue2，没有下载过vue2就不用加-init)
创建文件 vue create xxx(文件名)
启动项目 npm run serve
vue3.0下载路由 npm i vue-router@nexe(@nexe最新版本)
npm i -->可以全部下载
打包
npm run bulid
axios.defaults.baseURL="/api";
打包时把/api删除，运行环境加上才会显示
axios数据交互
下载方式：npm i axios --save
//步骤：
1.下载
2.导入import axios from 'axios'//全局引用（在main.js）
3.路径
server.get("/home", function(req, res) {}
server.post("/info", function(req, res) {
let arr = [{},{}];
for (var i = 0; i < arr.length; i++) {
if (arr[i].id==req.body.id) {
res.send(arr[i]);
}
}
}
4.获取
created(){
this.$axios.get("/home").then((res)=>{
this.list=res.data;
});
}
解决跨域
//解决开发环境跨域问题（写在config下的index.js）
server.listen(8888);-->后台给的接口
proxyTable:{
'/api':{
target:'http://localhost:8888'，
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
}
数据交互例子
//后台代码
const express = require("express");
const bodyparser = require("body-parser");
let server = express();
server.use(bodyparser.urlencoded({}));
server.use(express.static('./dist'));
server.listen(8888);
//模拟死数据，k
server.get("/home", function(req, res) {
let arr = [{
id: 1,
title: "详细新闻1"
},
{
id: 2,
title: "详细新闻2"
},
{
id: 3,
title: "详细新闻3"
},
{
id: 4,
title: "详细新闻4"
}
];
res.send(arr);
})
server.post("/info", function(req, res) {
let arr = [{
id: 1,
title: "详细新闻1",
conent: "内容111"
},
{
id: 2,
title: "详细新闻2",
conent: "内容222"
},
{
id: 3,
title: "详细新闻3",
conent: "内容333"
},
{
id: 4,
title: "详细新闻4",
conent: "内容444"
}];
for (var i = 0; i < arr.length; i++) {
if (arr[i].id==req.body.id) {
res.send(arr[i]);
}
}
})
//vue代码
<template>
<div class="info" v-if="newdata">
<h1>{{ msg }}</h1>
<h2>{{newdata.title}}</h2>
<h3>{{newdata.conent}}</h3>
</div>
</template>
<script>
//import axios from 'axios';
import qs from 'qs';
export default {
name: 'Info',
data () {
return {
msg: '详细页面',
newdata:null
}
},
created(){
/*axios.get("/api/info?id="+this.$route.params.id).then((res)=>{
//this.list=res.data;
console.log(res);
this.newdata=res.data;
});
axios.get("/api/info",{params:{id:1}}).then((res)=>{
this.newdata=res.data;
})
* */
// post方式
//this.$axios全局定义的axios需要this.$
this.$axios.post("/info",qs.stringify({id:this.$route.params.id})).then((res)=>{
this.newdata=res.data;
})
}
}
</script>
<style scoped="scoped">
h1{
color: red;
}
</style>
存id和取的方法
export default createRouter({
history: createWebHashHistory(),
routes: [{
path: "/demo",
name: "Demo",
component: Demo
},{
path: "/index/:id",
name: "Index",
component: Index
}]
})
定义路由规则
<router-link :to="'/index/'+item.id"></router-link>
取值
<template>
<div class="index">
{{$route.params.id}}
<h1>{{con.conent}}</h1>
</div>
</template>
<script>
export default {
name: 'Index',
data() {
return {
msg: '详情页面',
inlist: [{
id: 1,
conent: "1111111111111111"
},
{
id: 2,
conent: "22222222222222222"
},
{
id: 3,
conent: "333333333333333"
},
{
id: 4,
conent: "444444444444444444"
}
],
con: []
}
},
created() {
for(let i = 0; i < this.inlist.length; i++) {
if(this.inlist[i].id == this.$route.params.id) {
this.con = this.inlist[i];
console.log(this.con);
}
}
}
}
</script>
1972
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
