01-作业-轮播图

<!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>Document</title>
</head>
<style>#app {text-align: center;}img {width: 500px;height: 300px;object-fit: cover;}button {vertical-align: top;margin-top: 140px;}
</style><!-- 分析: 1.默认图片显示 :src= arr[arrIndex];arrIndex的默认值为02.下一张@click = "next"arrIndex++;判断: 索引大于了图片地址数组的长度,那就应该改成0 3.上一张@click = 'prev'arrIndex--;判断: 索引小于0,那就应该改成最后一张的索引. -->
<body><div id="app"><button @click="prev">上一张</button><img v-bind:src=arr[index] alt=""><button @click="next">下一张</button></div><script src="../vue.js"></script><script>new Vue({el: "#app",data: {index: 0,arr: ["http://ossweb-img.qq.com/images/lol/web201310/skin/big145000.jpg","http://ossweb-img.qq.com/images/lol/web201310/skin/big145001.jpg","http://ossweb-img.qq.com/images/lol/web201310/skin/big145014.jpg","http://ossweb-img.qq.com/images/lol/web201310/skin/big145015.jpg","http://ossweb-img.qq.com/images/lol/web201310/skin/big145016.jpg","http://ossweb-img.qq.com/images/lol/web201310/skin/big145017.jpg"]},methods: {prev() {this.index--;if (this.index < 0) {this.index = this.arr.length - 1;}},next() {this.index++;if (this.index > this.arr.length - 1) {this.index = 0;}}}})</script></body>
</html>

展示效果: 实际运用v-bind与v-on结合
在最后一张的时候点击下一张显示第一张,在第一张的时候点击上一张显示最后一张

02-includes基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//includes是用来检测字符串或者数组中,是否包含某个值,如果包含就返回true,否则返回true// 1.用于字符串var str = 'abcdefg';var res = str.includes('abc');console.log(res);//true// 补充:var res2 = str.includes("");console.log(res2);//true// 2.用于数组var arr = [10,20,30,40,50];var res3 = arr.includes(100);console.log(res3);//false// 补充:var res4 = arr.includes();console.log(res4);//false</script>
</body>
</html>

03-案例-搜索当前英雄人物的详情

<!-- 分析: 1.完成默认的英雄展示 定义一个默认的索引 heroIndex:0;a.姓名  {{hero[heroIndex].name}}b.图片  :src="hero[heroIndex].img"c.英雄故事  v-html="hero[heroIndex].story"2.搜索功能a. input框  v-model="inputValue搜索框输入的值"   @keyup.enter = "搜索事件search"b. 搜索按钮 @click = "搜索事件search"3.搜索事件如何写? 3.1 遍历hero这个数组3.2 取遍历出来的每一项里面的name, 检测这个name包含不包含 搜索框输入的值(inputValue)   用includes判断3.3 如果包含就返回当前这个索引i, 也就是把这个i赋值给heroIndex, 找到了就不用再找了,就return. -->
<div id="app"><div class="nav"><span>英雄列表</span><button class="btn" @click="search">搜 索</button><input class="search" type="text" v-model="inputValue" @keyup.enter="search" placeholder="请输入英雄名称进行搜索"></div><div class="content"><!-- 人物列表 --><!-- 人物详情 --><div class="info"><div class="name">英雄姓名:{{hero[heroIndex].name}}</div><div class='img'><img :src="hero[heroIndex].img" alt=""></div><div class="story" v-html="hero[heroIndex].story"></div></div></div></div><script src="vue.js"></script><script>new Vue({el: "#app",data: {//搜索框中输入的值inputValue:"",//索引heroIndex:0,hero: [{"id": "Sylas","tags": "melee_tag mage_tag charge_tag charge_tag boy_tag ","title": "塞拉斯","name": "塞拉斯","iconUrl": "https://ossweb-img.qq.com/images/lol/img/champion/Sylas.png","story": "<h5>英雄故事:</h5>作为一个出生于德玛西亚穷苦家庭的法师，虽然当时塞拉斯还只是一个少年，搜魔人还是将他终身监禁。他使用偷来的魔法杀害了场上所有人，除了饱受惊吓的拉克丝。塞拉斯不是以逃犯的身份离开搜魔人监狱，而是成为了法师反抗的代表。","img": "http://ossweb-img.qq.com/images/lol/web201310/skin/big517000.jpg","roles": ["法师", "刺客"]}, {"id": "Neeko","tags": "ranged_tag girl_tag mage_tag charge_tag jungle_tag support_tag","title": "妮蔻","name": "妮蔻","iconUrl": "https://ossweb-img.qq.com/images/lol/img/champion/Neeko.png","story": "<h5>英雄故事:</h5>妮蔻来自一个早已迷失的瓦斯塔亚部落。她可以借用别人的外表来伪装自己，融入人群，甚至通过影响别人的情绪状态，一瞬间就能化敌为友。没人知道妮蔻到底在哪儿——或者到底是谁，但是想要为难她的人会立刻见识到她的本色，感受原始的精神魔法倾泻在自己身上的痛苦。","img": "http://ossweb-img.qq.com/images/lol/web201310/skin/big518000.jpg","roles": ["法师", "辅助"]}], methods: {search() {//遍历hero数组for (let i = 0; i < this.hero.length; i++) {if (this.hero[i].name.includes(this.value)) {this.index = i;return;}}}}})</script>

展示效果: 代码中的hero里面数组的数据有很多只拷贝了两份上去
在输入框输入关键词,按下回车或者搜索按钮可以将对应的英雄名以及英雄图片英雄故事显示在页面上

04-v-bind指令之对象用法:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 300px;height: 300px;background-color: pink;transition: all 2s;}.active {width: 500px;height: 500px;background-color: red;}.fontSize {font-size: 40px;}</style>
</head>
<!-- v-bind指令 对象用法用在有多个属性值得属性上,适用于class,class就可以有多个值v-bind:class="{类名:一句简短的js,最后转换成布尔值"如果布尔值是true,那就说明这个类作用在这个标签上了如果布尔值是false,那就说明这个类没有作用在这个标签上-->
<body><div id='app'><!-- 点击按钮切换 要或者不要active,fontSize属性 --><button @click="isChange=!isChange">点我变变变</button><!-- <div class="box" :class="{active:true,fontSize:true}">你好鸭</div>         --><div class="box" :class="{active:isChange,fontSize:isChange}">你好鸭</div></div><script src='vue.js'></script><script>var app = new Vue({el: '#app',data: {isChange: true},});</script>
</body>
</html>

展示效果: 没点击按钮之前是有active类(500px红色)跟fontsize类(大字体)的
点击按钮之后是切换变成没有active类(500px红色)跟fontsize类(大字体),也就只有box类(300px默认字体)

05-v-for指令(用于数组):

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<!-- v-for指令:对数组遍历，得到每一项的值，从而进行列表之类的渲染处理。语法: v-for="(item, index) in 数组"（这里index索引也可省略不写）注意:a.item和index其实是可以改名的,但是一般就用item跟index,语义更强b.item跟index其实是有作用范围的,就是当前遍历的这个标签里面-->
<body><div id='app'><ul><!-- 这里有多少li由arr有多少元素决定 --><li v-for="(item, index) in arr">{{item}}~~{{index}}</li></ul></div><script src='vue.js'></script><script>var app = new Vue({el: '#app',data: {arr:['测试1','测试2','测试3','测试4'],},});</script>
</body>
</html>
<body><div id='app'><ul><!-- 这里有多少li由arr有多少元素决定 --><li v-for="(item, index) in arr">{{item}}~~{{index}}</li></ul></div><script src='vue.js'></script><script>var app = new Vue({el: '#app',data: {arr:['测试1','测试2','测试3','测试4'],},});</script>
</body></html>

展示效果:

06-v-for指令(用于对象):

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<!--v-for用于对象:对对象遍历，得到每一项的值，从而进行列表之类的渲染处理。
语法:v-for="(value,key,index) in obj"
(这里key与index可省略,对象的for在实际项目中很少用到。)
-->
<body><div id='app'><div v-for="(value,key,index) in obj">{{value}}~{{key}}~{{index}}</div></div><script src='./vue.js'></script><script>new Vue({el: '#app',data: {obj: {name: 'yania',age: 19,gender: '美女'}}});</script>
</body>
</html>

展示效果:

07-V-for指令补充( 点击哪个li哪个lli弹出下标且有背景色)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.active {background-color: pink;}</style>
</head>
<body><div id='app'><!-- 需求:1.有多少个li取决于arr有多少个元素,2.每个li标签有单击事件,弹出当前点击的li标签的索引 3.希望点击哪个li,哪个li的背景色就为红色--><ul><!-- <li :class="active:2==0"></li><li :class="active:2==1"></li><li :class="active:2==2"></li><li :class="active:2==3"></li>--><li :class="{active:currentIndex == index}" @click="liClick(index)" v-for="(item, index) in arr">{{item}}~~{{index}}</li></ul></div><script src='vue.js'></script><script>var app = new Vue({el: '#app',data: {currentIndex: 0, //当前li标签的索引arr: ['测试1', '测试2', '测试3', '测试4'],},methods: {liClick(index) {// 点击的时候就可以给这个currentIndex赋值this.currentIndex = index;alert(index)}}});</script></body>
</html>

展示效果: 点击哪个li哪个lli弹出下标且有背景色

08-案例单纯英雄列表:

<!-- 分析: 1.列表处理:li标签有多少个取决于hero数组有多少个英雄数据. v-for="(item,index) in hero"人物名称:  {{item.name}}2.处理样式:当前点击的li标签要添加active类:class="{active:布尔值(当前点击index值 === 当前li标签项的index值)}"3.事件处理:给每一个li标签注册事件给当前点击index值赋值 , 赋当前点击的li标签的index值. -->
<body><div id="app"><div class="content"><!-- 人物列表 --><ul class="list"><!-- 点击的时候将该点击的li的下标index赋值给currentIndex --><li class="item" @click="currentIndex=index" :class="{active:currentIndex == index}" v-for="(item, index) in hero" >{{item.name}}</li></ul></div><div class="noData">暂无数据</div></div><script src="vue.js"></script><script>new Vue({el: "#app",data: {currentIndex:0,hero: [{"id": "Sylas","tags": "melee_tag mage_tag charge_tag charge_tag boy_tag ","title": "塞拉斯","name": "塞拉斯","iconUrl": "https://ossweb-img.qq.com/images/lol/img/champion/Sylas.png","story": "<h5>英雄故事:</h5>作为一个出生于德玛西亚穷苦家庭的法师，虽然当时塞拉斯还只是一个少年，搜魔人还是将他终身监禁。他使用偷来的魔法杀害了场上所有人，除了饱受惊吓的拉克丝。塞拉斯不是以逃犯的身份离开搜魔人监狱，而是成为了法师反抗的代表。","img": "http://ossweb-img.qq.com/images/lol/web201310/skin/big517000.jpg","roles": ["法师", "刺客"]}, {"id": "Neeko","tags": "ranged_tag girl_tag mage_tag charge_tag jungle_tag support_tag","title": "妮蔻","name": "妮蔻","iconUrl": "https://ossweb-img.qq.com/images/lol/img/champion/Neeko.png","story": "<h5>英雄故事:</h5>妮蔻来自一个早已迷失的瓦斯塔亚部落。她可以借用别人的外表来伪装自己，融入人群，甚至通过影响别人的情绪状态，一瞬间就能化敌为友。没人知道妮蔻到底在哪儿——或者到底是谁，但是想要为难她的人会立刻见识到她的本色，感受原始的精神魔法倾泻在自己身上的痛苦。","img": "http://ossweb-img.qq.com/images/lol/web201310/skin/big518000.jpg","roles": ["法师", "辅助"]},]}})</script>

展示效果: 上面的hero数组的数据不全实际有很多,太多了就没拷贝.
点击哪个li哪个li就背景颜色变绿色

09-v-if,v-else-if,v-else指令:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<!-- v-if指令:有条件的渲染某些内容语法:v-if="一句话表达式(最后转换成boolean值，如果为true，则进行该语句所在标签渲染，如果为false则不渲染，该标签将不存在)"v-else-if和 v-if 是一样用法，但是是在 v-if 不成立情况下才会走到`v-else-if`这里来v-else后面无须跟任何语句，当前面 v-if 和 v-else-if 都不成立时，它就会执行，当前面任何一个执行渲染，它就不执行注意:v-if 与 v-else-if 与 v-else 一起使用的时候,他们必须是兄弟标签--><body><div id='app'><input type="text" placeholder="请输入相应成绩" v-model="inputValue"><P v-if="inputValue>=90">买法拉利</P><P v-else-if="inputValue>=80">买宝马</P><P v-else-if="inputValue>=70">买雪佛兰</P><P v-else-if="inputValue>=60">买拖拉机</P><P v-else>吃锤子</P><div>哈哈</div></div><script src='vue.js'></script><script>var app = new Vue({el: '#app',data: {inputValue: 100}});</script>
</body>
</html>

展示效果: 根据不同条件选择性的渲染某些标签。
在输入框里面输入不同的分数展示的不同的p标签

10-案例完整版英雄搜索:

<!-- 分析: 1.完成左边列表功能li标签   v-for="(item,index) in hero"  英雄姓名{{item.name}}点击事件 更改当前点击的索引 为 当前li标签项的索引绑定样式类 :class="{active:currentIndex === index}" 2.完成中间详情部分a.姓名  {{hero[currentIndex].name}} b.图片  :src="hero[currentIndex].img"c.英雄特征  v-for="(item,index) in hero[currentIndex].roles"d.英雄故事  v-html="hero[currentIndex].story"3.搜索功能a.搜索框  v-model="inputValue(搜索框输入的搜索关键字)" @keyup.enter="搜索事件(search)"b.搜索按钮@click="搜索事件(search)"c.搜索事件(search)里面如何写c.1 遍历hero数组c.2 拿到遍历出来的每一项的name的值,判断包含不包含 inputValue(搜索框输入的搜索关键字)c.3 如果包含的话, 就把当前这一项的i的值, 赋值给currentIndexc.4 找到了就不要再找了.  4.优化部分a.搜索不到的时候显示暂无数据b.搜索一个关键词,左边列表要全部显示带该关键词的英雄名--><div id="app"><div class="nav"><span>英雄列表</span><button class="btn" @click="search">搜 索</button><input class="search" type="text" v-model="inputValue" @keyup.enter="search" placeholder="请输入英雄名称进行搜索"></div><div class="content" v-if="hasData"><!-- 人物列表 --><ul class="list"><li class="item" :class="{active:currentIndex==index}" @click="currentIndex=index"v-for="(item, index) in hero" v-if="item.name.includes(searchValue)">{{item.name}}</li><!-- 这里搜索的关键词,左边列表只显示对应的英雄名,其余的不用显示 --></ul><!-- 人物详情 --><div class="info"><div class="name">英雄姓名:{{hero[currentIndex].name}}</div><div class='img'><img :src="hero[currentIndex].img" alt=""></div><div class="tags"><h5>英雄特征：</h5><span v-for="(item, index) in hero[currentIndex].roles">{{item}}</span></div><div class="story" v-html="hero[currentIndex].story"></div></div></div><div class="noData" v-else>暂无数据</div></div><script src="vue.js"></script><script>new Vue({el: "#app",data: {// 是否搜索到了数据来是否显示数据hasData:true,//搜索框输入的搜索关键词inputValue: "",//回车时,用户输入的数据存储的中转站searchValue:"",currentIndex: 0,hero: [{"id": "Sylas","tags": "melee_tag mage_tag charge_tag charge_tag boy_tag ","title": "塞拉斯","name": "塞拉斯","iconUrl": "https://ossweb-img.qq.com/images/lol/img/champion/Sylas.png","story": "<h5>英雄故事:</h5>作为一个出生于德玛西亚穷苦家庭的法师，虽然当时塞拉斯还只是一个少年，搜魔人还是将他终身监禁。他使用偷来的魔法杀害了场上所有人，除了饱受惊吓的拉克丝。塞拉斯不是以逃犯的身份离开搜魔人监狱，而是成为了法师反抗的代表。","img": "http://ossweb-img.qq.com/images/lol/web201310/skin/big517000.jpg","roles": ["法师", "刺客"]}, {"id": "Neeko","tags": "ranged_tag girl_tag mage_tag charge_tag jungle_tag support_tag","title": "妮蔻","name": "妮蔻","iconUrl": "https://ossweb-img.qq.com/images/lol/img/champion/Neeko.png","story": "<h5>英雄故事:</h5>妮蔻来自一个早已迷失的瓦斯塔亚部落。她可以借用别人的外表来伪装自己，融入人群，甚至通过影响别人的情绪状态，一瞬间就能化敌为友。没人知道妮蔻到底在哪儿——或者到底是谁，但是想要为难她的人会立刻见识到她的本色，感受原始的精神魔法倾泻在自己身上的痛苦。","img": "http://ossweb-img.qq.com/images/lol/web201310/skin/big518000.jpg","roles": ["法师", "辅助"]}]},methods: {search() {//搜索的时候先不显示数据,如果真的列表中有用户搜的关键词就再改成true显示出来this.hasData=false;// 点击搜索按钮或者回车搜索时,给中转站赋值this.searchValue=this.inputValue;//遍历hero数组for (let i = 0; i < this.hero.length; i++) {// 判断用户输入的关键词是否在英雄名中if (this.hero[i].name.includes(this.inputValue)) {//显示出来this.hasData=true;this.currentIndex=i;return;}}}},})</script>

展示效果:
1.打开页面点击左侧的列表中任何英雄中间页面会显示对象的英雄名图片技能以及故事,
2.搜索或者按下回车英雄名中的某个字去搜,可以出现对应的所有的英雄名在左侧列表,并显示左侧列表中第一个英雄对应的信息显示在中间页面
3.如果在输入框输入类似123或者不属于英雄名中的字,是搜不到相关英雄的,那就中间页面显示"暂无数据"

第一张

第二张

第三张

11-key值的基本使用:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<!-- 有时候标签长得太像，vue也不一定能识别
当我们写的一些html标签相似度太高时，vue识别的时候是有可能 识别不出来 的，
加上key相当于加了个编号 ，让vue更准确的识别出来，不至于我们在进行一些值修改什么的时候出错。 -->
<!--语法:key="值"什么时候加key?1.一般v-for循环要加2.需要更新每个数据时出了问题,考虑加个key看看-->
<body><!-- <ul><li v-for="(item, index) in items" :key="index"></li></ul> --><!-- 用v-if时,这个标签是直接没有 --><div id='app'><button @click="boolVal=!boolVal">点我切换登录模式</button><div v-if="boolVal" :key="1">用户名:<input type="text" name="" id=""  placeholder="请输入用户名"></div><div v-else :key="2">手机号:<input type="text" name="" id=""  placeholder="请输入手机号"></div></div><script src='vue.js'></script><script>var app = new Vue({el: '#app',data: {boolVal:true}});</script><!-- --------------------------------------------- --><!-- 用v-show时,这个标签显示与隐藏 在这个input上输入的内容即使切换之后再切换回来还是会存在--><div id='app'><button @click="boolVal=!boolVal">点我切换登录模式</button><div v-show="boolVal" :key="1">用户名:<input type="text" name="" id="" placeholder="请输入用户名"></div><div v-show="!boolVal" :key="2">手机号:<input type="text" name="" id="" placeholder="请输入手机号"></div></div><script src='./vue.js'></script><script>new Vue({el: '#app',data: {boolVal: true}});</script>
</body></html>

展示效果: 这个案例主要是在两个相似的标签加key来区别
第一个是用v-if做的,切换登录模式之后之前在输入框输入的就会不见,因为它主要是是对标签控制是否进行渲染。
第二个是用v-show做的,切换登录模式之后之前在输入框输入的也还在,切来切去都在,因为它主要是对标签控制是否显示还是隐藏本质是控制display:none

12-v-show指令:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<!-- v-show="一句话表达式（最后转换成boolean值，如果为真，则进行该标签显示，如果为假则该标签将display:none隐藏)"
注意:所在标签的显示与隐藏，但不管显示与隐藏，这标签都会渲染出来,只是显示与否v-show与v-if的对比:  v-show 控制标签是否显示,本质控制的是样式display v-if 直接控制当前这个标签是否渲染
应用场景:  当某些标签需要频繁切换使用时，建议优先考虑`v-show`,主要是在性能方向会更佳一些当某些标签需要判断 条件较多，且切换不太频繁，就优先考虑`v-if` 实际项目开发中,大部分都是使用v-if,因为它灵活   -->
<body><div id='app'><button @click="isShow=!isShow">点我</button><!-- v-show 控制标签是否显示,本质控制的是样式display --><div v-show="isShow">我是一个div</div><!-- v-if 直接控制当前这个标签是否渲染 --><p v-if="isShow">我是一个p</p></div><script src='vue.js'></script><script>var app = new Vue({el: '#app',data: {isShow: true}});</script>
</body>
</html>

展示效果:
不点击按钮之前是第一张图片,点击之后第二张图片,点击可以切换出现div跟p标签跟不出现
点击之后v-if与v-show都变成false,v-if变成false可以看到就是标签不在了,
v-show变成false可以看到就是加了一个display:none

02-vue(轮播图,v-bind对象用法,v-for指令,v-if指令,v-else-if,v-else指令,key值的基本使用,v-show指令,英雄搜索案例)相关推荐

Vue轮播图插件---Vue-Awesome-Swiper
轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...
CSS3动画demmo和Vue轮播图
demo1:自动旋转的图片. <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
用vue做轮播图关于require的用法
一开始,我用html做的页面,头部是轮播图,效果很好. 页面展示图片如下: 代码如下: <!DOCTYPE html> <html lang="en">&l ...
微信小程序vue轮播图_微信小程序-swiper（轮播图）抖动问题
ps:问题组件swiper(轮播图)真机上不自动滚动一直卡在那里抖动以前遇到这个问题,官方一直没有正面回复.就搁置了,不过有大半年没写小程序了也没去关注,今天就去看了下官方文档,发觉更新了点好东 ...
微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
vue轮播图实现点击图片跳转到外部链接
需求:点击轮播图中的图片跳转到外部链接,比如跳转到csdn首页. 实现: 1.写出大体框架 <template><el-carousel :interval="4000&q ...
Vue 过渡实现轮播图
Vue 过渡实现轮播图 Vue 过渡 Vue 的过渡系统是内置的,在元素从 DOM 中插入或移除时自动应用过渡效果. 过渡的实现要在目标元素上使用 transition 属性,具体实现参考Vue2 过 ...
Android自定义控件之轮播图控件
背景最近要做一个轮播图的效果,网上看了几篇文章,基本上都能找到实现,效果还挺不错,但是在写的时候感觉每次都要单独去重新在Activity里写一堆代码.于是自己封装了一下.这里只是做了下封装成一个控件 ...
uni-app 小程序项目三 1. 商品列表、过滤器、封装商品item组件、上拉加载、节流阀、下拉刷新、2. 商品详情、轮播图、商品价格闪烁问题 3.加入购物车、vuex、持久化存储、mixiins
1.0 创建 goodslist 分支 1.1 定义请求参数对象为了方便发起请求获取商品列表的数据,我们要根据接口的要求,事先定义一个请求参数对象: data() {return {// 请求参数对 ...
Vue2 轮播图组件 slide组件
Vue2原生始轮播图组件,支持宽度自适应.高度设置.轮播时间设置.左右箭头按钮控制,圆点按钮切换,以及箭头.圆点按钮是否显示. <v-carousel :slideData="slid ...

02-vue(轮播图,v-bind对象用法,v-for指令,v-if指令,v-else-if,v-else指令,key值的基本使用,v-show指令,英雄搜索案例)