vue指令——@click结合:src绑定图片url
Vue 图片 url 指令 绑定 结合 src click
2023-09-14 09:01:59 时间
<!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>
</style>
</head>
<body>
<div id="app" v-cloak>
<div>
<img :src="'images/'+url+'.jpg'" alt="">
</div>
<button @click="add">点击加1</button>
<button @click="minus">点击减1</button>
</div>
<script src = "js/vue.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
url: 0
},
methods:{
add(event) {
this.url ++
if(this.url >= 5) {
this.url = 0;
}
},
minus(){
if(this.url <= 0) {
this.url = 5;
}
this.url --
}
}
})
</script>
</body>
</html>
相关文章
- Python-drf前戏38-前端Vue
- 实现 Vue 框架用户短时间内多次点击同一按钮仅触发一次
- Vue笔记(10) vue-router
- Vue笔记(11) vue-router
- vue的双向绑定原理_vue中数据双向绑定的原理
- vue之图片上传组件封装
- VUE组件封装_vue组件内部双向绑定
- 【架构师(第三十三篇)】 Vue 中的实例及本地图片预览
- IntelliJ IDEA使用 vue-cli 创建Vue项目
- Vue组件插槽的使用
- vue.js客服系统实时聊天项目开发(十六)连接websocket实时处理消息,断线重连,处理服务端关闭指令
- 2023前端常考vue面试题集锦_2023-02-23
- 【前端】Vue VS React
- 「.vue文件的编译」5. 模板编译之基于AST的代码生成
- Vue.js安装教程(图解)
- 使用Vue技术从MSSQL中获取数据(vue获取mssql数据)
- Vue框架下的Redis调用实战(vue调用redis)
- Vue抢跑Redis速度感受实时重磅数据(vue获取redis)
- Vue调用Redis体验更好的开发效率(vue能调redis吗)
- Vue如何连接Redis数据库(vue怎么连接Redis)
- 使用Vue和Redis创建完美的后台应用(vue redis后台)