该文章是一个关于Vue.js的案例分析，展示了如何使用v-for指令遍历数组对象，每个对象包含按钮名称和图片URL。点击按钮时，通过v-show指令控制对应的图片显示，并改变触发按钮的样式使其变为红色。代码示例详细展示了数据结构和方法实现。
默认的页面
案例分析：
v-for遍历何种形式，数组？对象？数组对象？
我们根据页面效果可以得出
按钮和图片是意义相对应的，所以我们可以很快推出
v-for遍历的是数组对象
我们有页面展示可以分析，我们一定会用到的标签有按钮和图片标签
我们解决下一个问题
图片一开始是看不见的，我们给图片一个指令v-show
现在我们来完成事件驱动：点击按钮显示图片且按钮变成红色
整理一下class
业务逻辑处理
以下是所有代码，请大家多多指教
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="./vue-2.6.12.js"></script>
</head>
<body>
<div id="app" class="container">
<button v-for="(obj,index) in star" :key="obj.id" class="btn" :class="obj.btnColor" @click="show1(index)">{{obj.name}}</button><br>
<img :src="obj.imgurl" alt="":key="obj.id" v-for="obj in star" width="300" v-show="obj.isShow">
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
star:[
{id:1,name:"刘亦菲",imgurl:"images/1.webp" ,isShow:false,btnColor:"btn-default" },
{id:2,name:"曾黎",imgurl:"images/2.webp",isShow:false,btnColor:"btn-default" },
{id:3,name:"奥特曼",imgurl:"images/3.webp",isShow:false ,btnColor:"btn-default"},
]
},
methods:{
show1:function(index){
// 当前触发的按钮为红色
// 当前相对应的图片显示
for(var i=0;i<this.star.length;i++){
this.star[i].isShow=false;
this.star[i].btnColor="btn-default";
}
this.star[index].isShow=true;
this.star[index].btnColor="btn-danger";
}
}
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
