Vue實現(xiàn)點擊顯示不同圖片的效果
更新時間：2019年08月10日 08:50:40 作者：潔19
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)點擊顯示不同圖片的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue點擊顯示不同圖片的具體代碼，供大家參考，具體內(nèi)容如
使用Vue中的以下知識點來顯示效果
①：v-for：循環(huán)遍歷數(shù)據(jù)
②：v-bind:class={ }：綁定樣式
③：v-on:click（簡寫@click）：點擊事件
④：v-if：判斷
<!DOCTYPE html>
<html>
<head>
<title>點擊顯示相對應(yīng)的圖片</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.myul{
display: flex;
}
.myul li{
border: 1px solid orange;
height: 150px;
width: 150px;
flex-direction: row;
text-align: center;
line-height: 150px;
}
.content{
border: 1px solid grey;
height: 350px;
width: 600px;
}
.content img{
height: 350px;
width: 600px;
}
.active{
background: #3A9ffb;
color: white;
}
</style>
</head>
<body>
<div class="app">
<div class="title">
<ul class="myul">
<li v-for="(item,index) in mess" v-bind:class="{ 'active': status === index}" v-on:click="changeImg(index)">
{{item.content}}
</li>
</ul>
</div>
<div class="content">
<img src="img/1.jpg" v-if="status === 0">
<img src="img/2.jpg" v-if="status === 1">
<img src="img/84.jpg" v-if="status === 2">
<img src="img/85.jpg" v-if="status === 3">
</div>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.js"></script>
<script type="text/javascript">
new Vue({
el:".app",
data:{
status:0, //狀態(tài)顯示
mess:[
{id:0,content:"點擊顯示圖片一"},
{id:1,content:"點擊顯示圖片二"},
{id:2,content:"點擊顯示圖片三"},
{id:3,content:"點擊顯示圖片四"}
]
},
methods:{
changeImg:function(index){
this.status=index;
}
}
})
</script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)商品購物車全選反選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Vue.js組件使用props傳遞數(shù)據(jù)的方法
這篇文章主要為大家詳細(xì)介紹了Vue.js組件使用props傳遞數(shù)據(jù)的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數(shù)據(jù)數(shù)組，而 item 則是被迭代的數(shù)組元素的別名。今天通過本文給大家介紹Vue中v-for更新檢測的操作方法，感興趣的朋友一起看看吧2021-10-10
這篇文章主要介紹了Vue添加請求攔截器及vue-resource 攔截器使用,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了vue3.0父傳給子的值不隨父組件改變而改變問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要給大家介紹了關(guān)于Vite版本更新檢查實現(xiàn)頁面自動刷新的解決思路,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-02-02
本文主要介紹了Vue中如何實現(xiàn)動態(tài)路由的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
詳解vue中的父子傳值雙向綁定及數(shù)據(jù)更新問題
這篇文章主要介紹了vue中的父子傳值雙向綁定及數(shù)據(jù)更新問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
這篇文章主要為大家詳細(xì)介紹了Vue生命周期的示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了vue2.x background:url()的踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04