v-on

最新推荐文章于 2024-07-04 00:59:27 发布

MIC的小橘子

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量106

点赞数 2

分类专栏： vue的介绍使用文章标签：前端 javascript vue.js html5

本文链接：https://blog.csdn.net/weixin_54567665/article/details/139130426

版权

vue的介绍使用专栏收录该内容

10 篇文章 0 订阅

订阅专栏

事件绑定指令。

通过v-on可以进行不同事件的绑定。

常用的事件是按钮的单击事件

语法：

v-on:事件名称="函数名称()"

在使用事件绑定的时候，一般不会去写v-on指令，而是通过一个简化的方式来实现指令

语法

普通的指令调用：v-on:事件名称="函数名称"
简化指令调用：@事件名称="函数名称"

案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入js文件 -->
<script src="js/vue2.js"></script>
</head>
<body>
<!-- 管理区域 -->
<div id="box">
<!-- 创建两个按钮 -->
<!-- <button v-on:click="sub()">数量减少</button>
<button v-on:click="add()">数量增加</button> -->
<!-- 事件绑定指令简化写法 -->
<button @click="sub()">数量减少</button>
<button @click="add()">数量增加</button>
</div>
<!-- 自定义脚本 -->
<script>
// 创建对象
var vm = new Vue({
el: '#box',
methods: {
sub(){
console.log('数量减少了11111')
},
v-show
从名字上就可以看出，v-show的所用就是显示或者隐藏一些元素。
可以通过一个布尔值（真或假）进行元素的隐藏或显示。如果是真值（true）就显示元素；如果是假值（false）就
隐藏元素
虽然可以直接在v-show指令中设置true或false数据，但是为了能够更加灵活的控制显示或隐藏数据，一般布尔值
数据需要从vue实例对象中来。
add(){
console.log('数量增加了3333！！')
}
},
})
</script>
</body>
</html>