vue项目中点击按钮切换图片
这是里面的两个按钮<div class="text-btnBox"><el-button type="primary" @click="changeone()">信息采集</el-button><el-button type="primary" @click="change()">岩层结构输出</el-button></div>
·
这是里面的两个按钮
<div class="text-btnBox">
<el-button type="primary" @click="changeone()">信息采集</el-button>
<el-button type="primary" @click="change()">岩层结构输出</el-button>
</div>
默认图片
<!-- 引入图片 -->
<el-image id="laji"
style="width: 340px; height: 600px"
:src="imgArr[0]"
></el-image>
js代码
<script>
// import av from '@/assets/images/1.png';
export default {
data() {
return {
// av:require("@/assets/images/1.png")
url: "../../../static/2.png",
url1: "../../../static/3.png",
url2: "../../../static/4.png",
url3: "../../../static/5.png",
url4: "../../../static/6.png",
url5: "../../../static/7.png",
imgArr:[
"../../../static/2.png",
"../../../static/7.png",
],
index:0,
i:1
};
},
methods: {
//改变图片
change() {
var msg=document.getElementById("laji");
//切换到另外一个图片
msg.src="../../../static/7.png";
},
changeone(){
var msg=document.getElementById("laji");
//切换到另外一个图片
msg.src="../../../static/2.png";
}
},
};
</script>
更多推荐
已为社区贡献7条内容
所有评论(0)