Vue 基础
文章目录
el:挂载点
1、el的作用:设置Vue实例挂载/管理的元素
2、Vue会管理el命中的元素以及内部的后代元素
3、可以使用其他选择器,建议使用id选择器
4、可以使用其他的双标签,不能使用和
data:数据对象
Vue中用到的对象定义在data
中,data
中可以写简单类型、数组、复杂对象等
methods:方法对象
本地应用
v-text 指令:
设置标签的内容,可以使用 {{ xx }}
<html>
<head>
<title>vue test</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message + "拼接字符串1"}}<br/>
{{ message }}拼接字符串2
<br/>
<span>
{{ student.wechat}} : {{ student.name }} : {{ student.age }}
</span>
<ul>
<li>{{ address[0] }}</li>
<li>{{ address[1] }}</li>
</ul>
<h2 v-text="message + '拼接字符串3'">
123(无效、不显示123)
</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"hello,姚",
student:{
name:"yaoyu",
age:18,
wechat:"microddyy"
},
address:["shanghai","北京"]
}
})
</script>
</body>
</html>
v-html 指令:
用于设置元素的innerHTML
解析纯文本用v-text
,需要解析html时使用v-html
<html>
<head>
<title>vue test</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<p v-html="content"></p>
<p v-text="content"></p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
// content:"something"
content:"<a href='http://www.baidu.com'>点我</a>"
}
})
</script>
</body>
</html>
v-on 指令:
为元素绑定事件
注意:
1、事件名不加on
2、v-on 可以简写为:@
3、绑定的方法写在methods属性中
4、方法内通过this
关键字可以访问data中的数据
<html>
<head>
<title>vue test</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<input type="button" value="单机事件绑定1" v-on:click="doSome"/>
<input type="button" value="双击事件绑定2" v-on:dblclick="doSome"/>
<!-- 简写 -->
<input type="button" value="单机事件绑定3" @click="doSome"/>
<!-- 不操作dom元素,通过事件修改页面元素的值 -->
<h2 type="button" @click="change">{{ food }}</h2>
</div>
<script>
var app = new Vue({
el:'#app',
methods:{
doSome:function(){ // 函数名:function(){xxxx}
alert(123);
},
change:function(){
this.food += "potato";
}
},
data:{
food:"西红柿"
}
})
</script>
</body>
</html>
小例子:计数器
<html>
<head>
<title>vue test</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="input_nunm">
<button @click="down">
-
</button>
<span>{{ num }}</span>
<button @click="up">
+
</button>
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
down:function(){
if (this.num > 0){
this.num--;
} else{
alert("不能减小了!");
}
},
up:function(){
if (this.num < 5){
this.num++;
} else{
alert("不能增大了!");
// return;
}
// console.log("up!!!");
}
}
})
</script>
</body>
</html>
结果:
点击 +
计数加一,点击 -
计数减一。减到0弹窗提示不能再减了,加到5弹窗提示不能再加了。
v-show 指令:
根据表达式的真假,切换元素的显示和隐藏。本质是通过修改元素的 display
属性来实现显示或者隐藏
<html>
<head>
<title>vue test</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<img src="http://www.itheima.com/images/logo.png" alt="图片加载失败提示文字" title="鼠标悬停图片上提示文件" v-show="true"/>
<img src="http://www.itheima.com/images/logo.png" alt="图片加载失败提示文字" title="鼠标悬停图片上提示文件" v-show="isShow"/>
<img src="http://www.itheima.com/images/logo.png" alt="图片加载失败提示文字" title="鼠标悬停图片上提示文件" v-show="age>18"/>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
age:19
}
})
</script>
</body>
</html>
v-if 指令:
根据表达式的真假,切换元素的显示与隐藏(操作的是dom元素,表达式为false就直接移除标签,表达式为true时在dom树中添加标签。v-show修饰的元素一直都在html中,只是修改了元素的display属性)
频繁变换的数据使用 v-show,否则使用 v-if(操作dom元素更消耗性能)
<img src="http://www.itheima.com/images/logo.png" alt="图片加载失败提示文字" title="鼠标悬停图片上提示文件" v-if="true"/>
<img src="http://www.itheima.com/images/logo.png" alt="图片加载失败提示文字" title="鼠标悬停图片上提示文件" v-if="isShow"/>
<img src="http://www.itheima.com/images/logo.png" alt="图片加载失败提示文字" title="鼠标悬停图片上提示文件" v-if="age>18"/>
v-bind 指令:
设置元素的属性,如:class
、src
、title
等
注意:v-bind可以省略;设置class时建议使用对象的方式
<html>
<head>
<title>vue test</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
.active{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc" />
<!-- 简写 -->
<img :src="imgSrc" :title="imgSrc+'123'"/>
<input type="button" value="change" @click="toggleActive"/>
<img :src="imgSrc" :class="isActive?'active':''" />
<img :src="imgSrc" :class="{active:isActive}" />
</div>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"http://www.itheima.com/images/logo.png",
isActive:false
},
methods:{
toggleActive:function(){
this.isActive = !this.isActive;
}
}
})
</script>
</body>
</html>
小例子:图片切换
分析:将图片保存到数组中 → 为每个图片设置一个索引 → 绑定src属性 → 写切换图片的逻辑 → 显示状态切换
<html>
<head>
<title>vue test</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<div id="mask">
<div class="center">
<h2 class="title">
<img src="./images/logo.png" alt=""> xxxx校区环境
</h2>
<img :src="imageAddress[index]"/ alt="">
<!-- 左箭头 -->
<a href="javascript:void(0)" class="left">
<img src="./images/prev.png" alt="" @click="prev"/ v-show="index!=0">
</a>
<!-- 右箭头 -->
<a href="javascript:void(0)" class="right">
<img src="./images/next.png" alt="" @click="next" v-show="index<imageAddress.length-1"/>
</a>
</div>
</div>
<script>
var app = new Vue({
el:"#mask",
data:{
imageAddress:[
"./images/00.jpg",
"./images/01.jpg",
"./images/02.jpg",
"./images/03.jpg",
"./images/04.jpg",
"./images/05.jpg",
"./images/06.jpg",
"./images/07.jpg",
"./images/08.jpg",
"./images/09.jpg",
"./images/10.jpg",
],
index:0
},
methods:{
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
}
})
</script>
</body>
</html>
v-for 指令:
遍历数组、对象等数据,动态【展示、删除、添加】页面元素。
<!DOCTYPE html>
<html>
<head>
<title>vue test</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<!--item代表每一项数据,index代表数据索引-->
<li v-for="(item,index) in arr" v-bind:title="item">
{{ index+1 }}:生成的列表:{{ item }}
</li>
</ul>
<h2 v-for="it in objArr">{{ it }}</h2>
<h2 v-for="it in objArr">{{ it.name }}</h2>
<!--点击按钮触发响应事件-->
<input type="button" value="添加" @click="add" />
<input type="button" value="删除" @click="remove" />
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
arr: ["bj", "sh", "gz", "sz"], // 数组数据
objArr: [ // 对象数据
{name: "zs"},
{name: "ls"},
]
},
methods:{
add:function(){
this.objArr.push({name:"ww"}); // push方法增加元素
this.arr.push("qq"); //
},
remove:function(){
this.objArr.shift(); // shift方法默认删除最左边的元素
}
}
})
</script>
</body>
</html>
v-on 指令补充:
1、传递自定义参数
2、事件修饰符
<!DOCTYPE html>
<html>
<head>
<title>vue test</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="click" @click="getNum(2)"/>
<!-- 绑定按下enter键触发。事件后跟上【.修饰符】对事件进行限制 -->
<input type="text" v-on:keyup.enter="doSome" />
</div>
</div>
<script>
var app = new Vue({
el: "#app",
methods:{
getNum:function(num){ // 自定义形参
console.log(num);
},
doSome:function(){
alert("!!!");
}
}
})
</script>
</body>
</html>
v-model 指令:
获取用户的输入。
获取和设置表单元素的值(也叫:双向数据绑定),绑定的数据
和 表单元素的值
相关联
<!DOCTYPE html>
<html>
<head>
<title>vue test</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="click" @click="changeM"/>
<input type="text" v-model="message" v-on:keyup.enter="doSome" />
<h2>{{ message }}</h2>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data:{
message:"xxx"
},
methods:{
doSome:function(){
alert("!!!");
},
changeM:function(){
this.message="yyy";
}
}
})
</script>
</body>
</html>
小例子:记事本
功能:
1新增:
生成列表结构:v-for
获取用户输入:v-model
回车,新增数据:v-on.enter 2删除:
点击 × 删除指定记录 3统计:
自动更改数据条数 4清空:
清除所有数据 5隐藏:
没有数据时,隐藏底部:v-show / v-if
<!DOCTYPE html>
<html>
<head>
<title>notebook</title>
<!-- <meta name="robots" content="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
<link rel="stylesheet" type="text/css" href="./css/index2.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- 主体区域 -->
<section id="todoapp">
<!-- 输入框 -->
<header class="header">
<h1>小黑记事本</h1>
<input autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo" v-model="inputValue" v-on:keyup.enter="generateNote"/>
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in arr">
<div class="view" >
<span class="index">{{ index+1 }}</span>
<label>{{ item }}</label>
<button class="destroy" @click="deleteEle(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer" >
<span class="todo-count" v-show="arr.length!=0">
<strong>{{ arr.length }}</strong> items left
</span>
<button class="clear-completed" @click="clearEle" v-if="arr.length!=0">
Clear
</button>
</footer>
</section>
<!-- 底部 -->
<footer class="info"></footer>
<script>
var app = new Vue({
el:"#todoapp",
data:{
arr:["吃饭", "睡觉", "学习"],
inputValue:"xxxxx"
},
methods:{
generateNote:function(){
this.arr.push(this.inputValue); // 往数组添加元素
},
deleteEle:function(index){
this.arr.splice(index,1); // splice(index,len,[item]):替换/删除/添加数组内某一个或者几个值(该方法会改变原始数组)
},
clearEle:function(){
this.arr=[];
}
},
})
</script>
</body>
</html>
网络应用
Vue结合网络数据开发应用
axios 网络请求库
ajax | jquryAjax | fetch | axios
1、使用axios前需要到导包,如:
2、使用get或post方法即可发送对应的请求
3、then方法中的回调函数在请求成功或失败后触发
4、通过回调函数的形参可以获取响应内容或错误信息
文档:https://github.com/axios/axios
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<input type="button" value="get请求" class="get"/>
<input type="button" value="post请求" class="post"/>
<script>
/*
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话
*/
document.querySelector(".get").onclick=function(){
axios.get("https://autumnfish.cn/api/joke/list?num=6")
.then(function(response){
console.log(response);
}, function(err){
console.log(err);
})
}
/*
接口2:用户注册
请求地址:https://autumnfish.cn/api/user/reg
请求方法:post
请求参数:username(用户名,字符串)
响应内容:注册成功或失败
*/
document.querySelector(".post").onclick=function(){
axios.post("https://autumnfish.cn/api/user/reg",{username:'zzz'})
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
})
}
</script>
</body>
</html>
axios网络请求库 + Vue
1、axios回调函数中的this已经改变,无法访问到data中的数据。可以把this保存起来,回调函数中直接使用保存的this即可。(还可以使用什么箭头函数)
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<!--点击按钮切换笑话-->
<input type="button" value="change joke" @click="getJoke"/>
<p>{{ joke }}</p>
</div>
<script>
/*
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话
*/
var app = new Vue({
el:"#app",
data:{
joke:123
},
methods:{
getJoke:function(){
var that = this; // 保存this
console.log(this.joke); // 一开始显示123
axios.get("https://autumnfish.cn/api/joke")
.then(function(response){
// console.log(response);
console.log(response.data);
// console.log(this.joke); // this会变化,这里输出undefined
that.joke=response.data;
},function(err){
})
}
}
})
</script>
</body>
</html>
小例子:天知道
1、回车查询天气
按下回车(v-on.enter)
查询数据(axios接口 v-model)
渲染数据(v-for 数组、that)
天气接口:xxxxxxxxxxxxx
2、点击查询天气
点击城市(v-on 自定义参数)
查询数据
渲染数据
注意:
逻辑代码 js 和页面 html建议分开
axios回调函数中this指向改变了,需要额外保存一份
服务器返回的数据复杂时,使用检查元素查看层级结构
weather.html
<!DOCTYPE html>
<html>
<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>天知道</title>
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/index.css" />
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="./images/logo.png" alt="logo" /></div>
<div class="form_group">
<input type="text" class="input_txt" placeholder="请输入查询的天气" @keyup.enter="searchWeather" v-model="city"/>
<button class="input_sub" @click="searchWeather()">
搜 索
</button>
</div>
<div class="hotkey">
<a href="javascript:;" @click="changeCity('北京')">北京</a>
<a href="javascript:;" @click="changeCity('上海')">上海</a>
<a href="javascript:;" @click="changeCity('广州')">广州</a>
<a href="javascript:;" @click="changeCity('深圳')">深圳</a>
</div>
</div>
<ul class="weather_list" >
<li v-for="item in weatherArr">
<div class="info_type">
<span class="iconfont">{{ item.type }}</span>
</div>
<div class="info_temp">
<b>{{ item.low }}</b>
~
<b>{{ item.high }}</b>
</div>
<div class="info_date">
<span>{{ item.date }}</span>
</div>
</li>
</ul>
</div>
<!-- 引入main.js -->
<script src="./js/main.js">
</script>
</body>
</html>
main.js
/*
请求地址:http://wthrcdn.etouch.cn/weather_mini
请求方法:get
请求参数:city(城市名)
响应内容:天气信息
1. 点击回车
2. 查询数据
3. 渲染数据
*/
var app = new Vue({
el:"#app",
data:{
city:"",
weatherArr:[]
},
methods:{
searchWeather:function(){
var that = this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
.then(function(response){
console.log(response);
that.weatherArr = response.data.data.forecast;
})
.catch(function(err){
})
},
changeCity:function(city){
this.city = city; // 点击之后该输入框的城市
this.searchWeather(); // 查询天气,需要加this
}
}
})
综合应用:音乐播放器
功能:歌曲搜索、歌曲播放、歌曲封面、歌曲评论、播放动画、播放mv
歌曲搜索:按下回车(v-on.enter),查询数据(axios接口 v-model),渲染数据
歌曲播放:点击播放(v-on)、获取歌曲地址并设置(v-bind)
歌曲封面:点击播放(v-on)、获取歌曲封面并设置(v-bind)
歌曲评论:点击播放(v-on)、获取歌曲评论并渲染(v-for)
播放动画:监听音乐播放(v-on play)、监听音乐暂停(v-on pause)、操作class属性的显示和删除,class属性生效否取决于后面值的真假(v-bind 对象)
播放mv:mv图标的显示和隐藏(v-if)、获取mv地址(axios mvid)、遮罩层(v-show v-on)、设置mv地址(v-bind)
player.html
<!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>player</title>
<!-- 样式 -->
<link rel="stylesheet" href="./css/index.css">
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="wrap">
<!-- 播放器主体区域 -->
<div class="play_wrap" id="player">
<div class="search_bar">
<img src="images/player_title.png" alt="" />
<!-- 搜索歌曲 -->
<input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" />
</div>
<div class="center_con">
<!-- 搜索歌曲列表 -->
<div class='song_wrapper'>
<ul class="song_list">
<li v-for="item in musicList">
<a href="javascript:;" @click="playMusic(item.id)"></a>
<b>{{ item.name }}</b>
<!-- mvid不等于0,则显示mv图标 -->
<span v-if="item.mvid!=0" @click="playMV(item.mvid)"><i></i></span>
</li>
</ul>
<img src="images/line.png" class="switch_btn" alt="">
</div>
<!-- 歌曲信息容器 -->
<!-- 控制class属性的playing显示或者删除 -->
<div class="player_con" :class="{playing:isPlaying}">
<img src="images/player_bar.png" class="play_bar" />
<!-- 黑胶碟片 -->
<img src="images/disc.png" class="disc autoRotate" />
<!-- 音乐封面的改变就是改变这里的src -->
<img :src="musicCover" class="cover autoRotate" />
</div>
<!-- 评论容器 -->
<div class="comment_wrapper">
<h5 class='title'>热门留言</h5>
<div class='comment_list'>
<dl v-for="item in hotComments">
<!-- 头像 -->
<dt><img :src="item.user.avatarUrl" alt=""></dt>
<dd class="name">{{ item.nickname}}</dd>
<dd class="detail">
{{ item.content }}
</dd>
</dl>
</div>
<img src="images/line.png" class="right_line">
</div>
</div>
<div class="audio_con">
<!-- 播放音乐就是在这里切换src -->
<audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
</div>
<!-- 播放mv -->
<div class="video_con" v-show="isShow" style="display: none;">
<video :src="mvUrl" controls="controls"></video>
<!-- 遮罩层,点击遮罩层关闭mv -->
<div class="mask" @click="hide"></div>
</div>
</div>
</div>
<script src="./js/main.js"></script>
</body>
</html>
main.js
/*
1:歌曲搜索接口
请求地址:https://autumnfish.cn/search
请求方法:get
请求参数:keywords(查询关键字)
响应内容:歌曲搜索结果
2:歌曲url获取接口
请求地址:https://autumnfish.cn/song/url
请求方法:get
请求参数:id(歌曲id)
响应内容:歌曲url地址
3.歌曲详情获取
请求地址:https://autumnfish.cn/song/detail
请求方法:get
请求参数:ids(歌曲id)
响应内容:歌曲详情(包括封面信息)
4.热门评论获取
请求地址:https://autumnfish.cn/comment/hot?type=0
请求方法:get
请求参数:id(歌曲id,地址中的type固定为0)
响应内容:歌曲的热门评论
5.mv地址获取
请求地址:https://autumnfish.cn/mv/url
请求方法:get
请求参数:id(mvid,为0表示没有mv)
响应内容:mv的地址
*/
var app = new Vue({
el: "#player",
data: {
query: "",// 查询关键字
musicList: [],// 歌曲数组
musicUrl: "",// 歌曲地址
musicCover: "",// 歌曲封面
hotComments: [],// 歌曲评论
isPlaying: false,// 动画是否播放
isShow: false,// 遮罩层是否显示
mvUrl: ""// mv地址
},
methods: {
// 歌曲搜索
searchMusic: function() {
var that = this;
axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(
function(response) {
// console.log(response);
that.musicList = response.data.result.songs;
// console.log(response.data.result.songs);
},
function(err) {}
);
},
// 歌曲播放
playMusic: function(musicId) {
// console.log(musicId);
var that = this;
// 调接口,获取歌曲地址
axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(
function(response) {
// console.log(response);
// console.log(response.data.data[0].url);
that.musicUrl = response.data.data[0].url;
},
function(err) {}
);
// 歌曲详情获取
axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then(
function(response) {
// console.log(response);
// console.log(response.data.songs[0].al.picUrl);
that.musicCover = response.data.songs[0].al.picUrl;
},
function(err) {}
);
// 歌曲评论获取
axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(
function(response) {
// console.log(response);
// console.log(response.data.hotComments);
that.hotComments = response.data.hotComments;
},
function(err) {}
);
},
// 歌曲播放,黑盘转动
play: function() {
// console.log("play");
this.isPlaying = true;
},
// 歌曲暂停,黑盘停止转动
pause: function() {
// console.log("pause");
this.isPlaying = false;
},
// 播放mv
playMV: function(mvid) {
var that = this;
axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then(
function(response) {
// console.log(response);
console.log(response.data.data.url);
that.isShow = true;
that.mvUrl = response.data.data.url;
},
function(err) {}
);
},
// 隐藏
hide: function() {
this.isShow = false;
}
}
});