Vue指令02——v-on指令和v-show的使用
Vue指令02——v-on指令和v-show的使用
v-on指令
格式1:v-on:事件=”方法“
格式2:@事件=”方法“
格式3:@事件=”方法(参数1,参数2)“ //把参数传到到方法中
格式4:@键盘事件 . 键盘的键名称=”方法“ //按下指定键才触发
作用:为元素绑定事件
v-on的实例(格式1-格式2)
效果:鼠标单击小明,增加”小妹“,鼠标移入div,出现弹窗。
<div id="app">
<!--鼠标移入事件,调用greens方法-->
<div style="background-color:bisque; width:100px; height:100px" v-on:mouseover="greens">第一个div</div>
<!---鼠标单击事件,调用changeName方法-->
<h2 @click="changeName">{{name}}</h2>
<div>
<script>
var ap1=new Vue({
el:"#app", //获取id为app的元素和它的子元素
data:{ //写数据的地方
name:"小明"
} ,
methods:{ //写方法的地方
greens:function(){ //弹窗方法
alert("鼠标移入的div")
},
changeName:function(){ //增加小妹的方法
this.name+="小妹"
}
}
})
</script>
v-on的实例(格式3-格式4)
效果:单击按钮把事件里的参数传到到方法中输出,在文本框里输入东西,只有按下回车键才弹出弹窗。
<div id="acc">
<button @click="ts('小明',6666)">按钮</button>
<input type="text" @keyup.Enter="rm">
</div>
<script>
var info=new Vue({
el:"#acc",
data:{
},
methods:{
ts:function(p1,p2){
console.log(p1);
console.log(p2)
},
rm:function(){
alert("ddddddddd")
}
}
})
</script>
v-show命令
作用:显示或隐藏元素
格式:v-show="逻辑表达式" //false或者true
v-show的实例
效果:单击按钮div隐藏或显示
<div id="app">
<!---调用cs方法v-show取反为false,div隐藏-->
<div style="background-color:bisque; width:100px; height:100px" v-show="a">单击按钮我隐藏</div>
<button @click="cs">按钮</button>
<div>
<script>
var ap1=new Vue({
el:"#app", //获取id为app的元素和它的子元素 data:{
data:{
a:true //给变量付初值
},
methods:{ //写方法的地方
cs:function(){
this.a=!this.a //取反
}
}
})
</script>
Vue指令02——v-on指令和v-show的使用的更多相关文章
- vue总结 02指令
指令 v-text 预期:string 详细: 更新元素的 textContent.如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值. 示例: <span ...
- vue 基础-->进阶 教程(2): 指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- vue.js介绍,常用指令,事件,以及制作简易留言版
一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作 二.vue和angular之间的区别 vue--简单易学 ...
- vue 基础-->进阶 教程(2): 指令、自定义指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- Vue中v-on的指令以及一些其他指令
1.v-on的基本使用 <div id="app"> <!-- 使用事件绑定的简写形式 --> <input type="button&qu ...
- Vue.JS快速上手(指令和实例方法)
1.声明式渲染 首先,我们要知道Vue是声明式渲染,那啥是声明式渲染,我们只需要告诉程序我们想要什么结果,其他的交给程序来做.与声明式渲染相对的是命令式渲染,即命令我们的程序去做什么,程序就会跟着你的 ...
- Vue.2.0.5-自定义指令
简介 除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件--然而,有的情况下,你仍然需要对纯 D ...
- Vue(十三)自定义指令
自定义指令 分类:全局指令.局部指令 1. 自定义全局指令 使用全局方法Vue.directive(指令ID,定义对象) 2. 自定义局部指令 <!DOCTYPE html> < ...
- Vue(三)常用指令
(1) v-model 双向数据绑定,一般用于表单元素 <script> window.onload=function(){ new Vue({ // el:'.itany', el:'d ...
随机推荐
- My97DatePicker接口
复制于http://blog.csdn.net/lidew521/article/details/8531685 一. 简介 1. 简介 目前的版本是:4.2 正式版 发布于2008-12-03 2. ...
- gulp更新4.0后的报错(gulp报Did you forget to signal async completion?)
本文首发于青云工作室 原文链接为 https://qystudio.ltd/posts/55153.html 缘起 今天我升级了gulp到4.0,在git三件套之后,网站并没有更新,我便登录了gith ...
- [数据生成器]UVA10054 The Necklace
应吴老师之邀,写了个数据生成器. 目前这个数据生成器可以保证生成的数据都是合法的,且效率也还不错.只是在建立普通连通图的时候zyy偷懒了,直接把所有点串起来从而保证图的连通.如果有大神有更好的方法请不 ...
- 国内外主流5款doshboard软件比较和对比
大数据行业随着互联网的蓬勃发展中也越来越被人们看好,但是从事大数据行业的数据分析师经常会谈到dashboard,很多人就会疑惑什么是dashboard,下面就来了解一下Doshboard的发展. da ...
- 一文告诉你dashboard究竟有多重要!
dashboard,我们一看这个词可能会觉得困惑,这是什么意思?看起来很高大上的样子. 实际上它的中文含义即是我们BI界老生常谈的话题--仪表盘.dashboard是商业智能仪表盘的简称,它是一般商业 ...
- Linux性能优化实战CPU篇之软中断(三)
一.软中断 1,中断的定义 a>定义 举例:你点了一份外卖,在无法获知外卖进度的情况下,配送员送外卖是不等人的,到了发现没人取会直接走,所以你只能苦苦等着,时不时去门口看送到没有,无法干别的事情 ...
- Html简单标签
学习html <h1> 标题标签</h1> 标题标签 <p>段落标签</p> 段落标签 换行标签</br> 换行标签 水平线标签</h ...
- 【基础知识】 CPU 详细整理(个人整理)
本文只是个人对cpu的理解,不建议浏览 建议浏览:https://zhuanlan.zhihu.com/p/397260483 提要 64位/32位操作系统,64/32指的是通用寄存器的位数. 定义 ...
- Linux修改权限命令chmod用法示例
Linux公社 2020年10月13日 来自:Linux迷 网址:https://www.linuxmi.com/linux-chmod.html Linux中的Chmod命令用于更改或分配文件和目录 ...
- C语言刷 堆(优先队列)
703. 数据流中的第 K 大元素 /* 小根堆 */ typedef struct { int heapCapacity; int heapSize; int *heap; } KthLargest ...