课前准备

带领大家学习分支(if、else)、以及循环(for)
至于属性与样式绑定在上一篇文章已经讲解

分支
循环
实现选项卡

分支(if、else if、else)

主要指if、else if、else

如何使用

顺便把show指令学习以下
show=true，则显示,反之隐藏

<h1>分支 if elseif</h1><div id="app"><div v-if="score>=90">优秀</div><div v-else-if="score<90&&score>=80">良好</div><div v-else>差</div><hr/><h1>show</h1><div v-show="flag">内容</div></div>

<script>var vm=new Vue({el:'#app',data:{score: 70,flag:false}})
</script>

最终show内容不会显示,if那显示差

分支的学习就完结~

循环(for)

语法:v-for="循环名 in 变量名"

循环数组
循环数组中的对象
循环单个对象

循环数组

此处顺便可以练习隔行换色
v-for="(循环名,下标) in 数组"

css

     .j{background-color: blueviolet;}.o{background-color: aqua;}

<div id="app"><div>水果列表</div><ul><li v-for="(item,i) in fruits" v-text="item+'--方案一--'+i" :class="i%2==0?'o':'j'"></li><li v-for="(item,i) in fruits" v-text="item+'--方案二--'+i" :class="{o:i%2==0,j:i%2!=0}"></li></ul>
</div>

var vm=new Vue({el:'#app',data:{fruits:['apple','orange','banana','watermelon','almond','apricot','arbutus','berry']}})

效果图:

循环数组中的对象

设置key=“item.id” 循环对象时确保唯一性,key是唯一的
v-for="循环名,下标 in 数组"

<div id="app">
<div>对象--水果列表</div><ul><!-- key="item.id" 循环对象时确保唯一性,key是唯一的 --><li :key="item.id" v-for="item,k in mystuid">id={{item.id}}name={{item.name}}age={{item.age}}</li></ul>
</div>

var vm=new Vue({el:'#app',data:{mystuid:[{id:1,name:'st1',age:19},{id:2,name:'st3',age:121},{id:3,name:'st5',age:13}]}})

效果图:

循环单个对象

v-for="值,键名,下标 in 对象"

<div id="app">
<div>对象</div><ul><li v-for="v,k,i in obj">{{i}}---{{k}}---{{v}}</li></ul>
</div>

var vm=new Vue({el:'#app',data:{obj:{name:'碰磕',age:18,stu:'博士'}}})

效果图:

循环的学习就完结~

步入正题,做出选项卡图片切换

实现选项卡

用数组中放对象来存放选项卡名称、id,以及对应的图片
用一个变量来存放下标

编写代码

css

     li{float: left;list-style: none;width: 200px;height: 50px;border: 1px solid red;text-align: center;cursor: pointer;}img{width: 610px;height: 400px;margin-right: 30%;margin-left: 40px;}.active{background-color: red;}

html

<div id="app"><ul><li :key="item.id" v-for="item in list" :class="{active:item.id==index}" @click="qh(item.id)">{{item.name}}</li></ul><br><img v-for="item in list" v-if="item.id==index" :src="item.path"></div>

var vm=new Vue({el:"#app",data:{index:1,list:[{id:1,name:'选项卡1',path:'./img/chunyu01.png'},{id:2,name:'选项卡2',path:'./img/chunyu02.png'},{id:3,name:'选项卡3',path:'./img/chunyu03.png'}]},methods:{qh:function(id){this.index=id;}}})

最终效果图

选项卡就做好了

Vue2利用分支、循环、属性样式绑定实现选项卡图片切换相关推荐

Angular属性绑定，class绑定，事件绑定，属性样式绑定
多谢大佬指正,原创转载连接. 属性绑定插值表达式:src="{{user.pic}}" 使用: [ ] :[property]="变量" 使用:bind-:b ...
js基础3 dom基础/绑定获取事件/图片切换练习/文档加载/全选全不选/dom的其他属性/dom的增加/添加删除练习
dom基础 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8 ...
案例：简单计算器|| 属性绑定||v-model指令的本质||样式绑定
需求:实现简单的加法计算,分别输入数值a和数值b ,点击计算按钮,结果显示在下面. <!DOCTYPE html> <html lang="en"> < ...
angular条件渲染、列表渲染、属性绑定、样式绑定、事件绑定
文章目录属性绑定样式绑定绑定单一样式绑定多个样式用 NgStyle 设置内联样式类绑定绑定单个类样式绑定到多个 CSS 类用 NgClass 添加和删除类条件渲染列表渲染 *ng ...
五十九、Vue中的样式绑定
@Author:Runsen @Date:2020/10/16 大四是一个焦虑的时期.烦恼有时候是具体问题带来的压力,有时候却是无端的.莫名其妙的,有时候还极易受到外界的影响,别人一句话就会激起内心难 ...
利用css transition属性实现一个带动画显隐的微信小程序部件
我们先来看效果图像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这个时候会 ...
一、Vue基础语法学习笔记系列——插值操作(Mustache语法、v-once、v-html、v-text、v-pre、v-cloak)、绑定属性v-bind(绑定class、style)、计算属性
一.插值操作 1. Mustache 如何将data中的文本数据,插入到HTML中呢? 我们已经学习过了,可以通过Mustache语法(也就是双大括号). Mustache: 胡子/胡须. 我们可以像 ...
Vue语法：类名和样式绑定
Vue语法:类名和样式绑定虽然类名class和样式style接收的类型都是字符串,但实际上类名是由数组拼接而成,而样式是由对键值对拼接而成. 通过字符串.数组.和对象三种方式为节点绑定类名属性: & ...
Java（二）分支循环、数组、字符串、方法
文章目录一.分支循环 1.1 分支结构 1.2 循环结构 1.3 跳转语句 1.4 分支循环相关问题 1.4.1 switch是否能作用在byte上,是否能作用在long上,是否能作用在String ...

Vue2利用分支、循环、属性样式绑定实现选项卡图片切换

课前准备

分支(if、else if、else)

如何使用

循环(for)

循环数组

循环数组中的对象

循环单个对象

实现选项卡

编写代码

最终效果图

Vue2利用分支、循环、属性样式绑定实现选项卡图片切换相关推荐

最新文章

热门文章