软件测试学习笔记丨 Vue 常用指令 - 条件渲染(v-if)
本文转自测试人社区,原文链接:https://ceshiren.com/t/topic/23482
v-on 指令
作用:绑定事件监听器
表达式:方法或者内联语句
简写:@
复制代码
软件测试开发免费视频教程分享
版权声明: 本文为 InfoQ 作者【测试人】的原创文章。
原文链接:【http://xie.infoq.cn/article/a2b5db74a85acf16c56d5b716】。文章转载请联系作者。
本文字数:542 字
阅读完需:约 2 分钟
本文转自测试人社区,原文链接:https://ceshiren.com/t/topic/23482
作用:绑定事件监听器
表达式:方法或者内联语句
简写:@
<!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>v-on</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<!-- v-on 使用方法一 -->
<button v-on:click="add">点击加1</button>
<!-- v-on 使用方法二 -->
<button @click="add2(2)">点击加2</button>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#app",
data: {
num: 1,
},
methods:{
add: function(){
this.num++
},
add2: function(num1){
this.num = this.num + num1
//打印日志
console.log("每次增加"+num1)
}
}
})
</script>
版权声明: 本文为 InfoQ 作者【测试人】的原创文章。
原文链接:【http://xie.infoq.cn/article/a2b5db74a85acf16c56d5b716】。文章转载请联系作者。
专注于软件测试开发 2022-08-29 加入
霍格沃兹测试开发学社,测试人社区:https://ceshiren.com/t/topic/22284
促进软件开发及相关领域知识与创新的传播
评论