前言
本文主要学习v-on指令的使用,同时也用到了v-bind指令。
使用v-on指令添加事件监听器,通过它调用Vue实例中定义的方法,增加用户与应用的交互性。
下述代码是一个用按钮控制灯泡状态的示例。
示例
<!DOCTYPE html>
<html>
<head>
<title>v-on指令</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 添加style样式进行居中展示 -->
<div style="text-align: center;">
<!-- 灯泡图片 -->
<img :src="imgSrc" />
<!-- 开关按钮 -->
<button v-on:click="switchBulb">开关</button>
<!-- 上一行代码可以简写为 -->
<button @click="switchBulb">开关</button>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isUp: false,// 灯泡是否亮起
lightUp: '../img/light-up.gif', // 灯泡亮起的图片
lightOut: '../img/light-out.gif',// 灯泡熄灭的图片
imgSrc: '../img/light-out.gif' // 绑定到img标签的src属性
},
methods: {
// 开关灯
switchBulb: function () {
if (this.isUp) {
// 如果灯是亮的,切换到熄灯状态
this.isUp = false;
// 并将灯的图片切换为熄灯图片
this.imgSrc = this.lightOut;
} else {
this.isUp = true;
this.imgSrc = this.lightUp;
}
}
}
});
</script>
</body>
</html>
v-on指令将switchBulb函数绑定到click点击事件上,点击按钮后执行switchBulb函数,切换img标签的src属性,从而通过两张图片表现为灯泡亮起和熄灭的两个状态。
示例的目录结构如下:
总结
- 需要定义一个变量用来表示灯的状态,这样写的代码更加健壮。
- 图片路径可以定义为变量,避免多次在代码中写路径,提高可读性,复用性。
- 图片来源于:W3school - JavaScript简介