vue指令之事件指令
什么是事件指令
事件指的是：点击事件，双击事件，划动事件，焦点事件...
- 语法
v-on:事件名='函数'
# 注意：函数必须写在 methods配置项中
示例
# 点击按钮，隐藏h1标签
<body>
<div id="app">
<button v-on:click="myclick">点我</button>
<h1 v-show="show">11111111</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {
myclick:function () {
// this就是当前vue实例，就是vm实例
this.show=!this.show // 这里 ！ 符号的作用是，如果是true就变为false，如果是false就变为true
}
}
})
</script>
- 简写形式
@事件名='函数'
# 下面的函数也可以简写
<script>
var vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {
myclick:function () {
// this就是当前vue实例，就是vm实例
this.show=!this.show // 这里 ！ 符号的作用是，如果是true就变为false，如果是false就变为true
}
}
})
</script>
# 简写为：
<script>
var vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {
myclick() {
this.show=!this.show
}
}
})
</script>
vue指令之事件指令的更多相关文章
- [Vue入门及介绍，基础使用、MVVM架构、插值表达式、文本指令、事件指令]
[Vue入门及介绍,基础使用.MVVM架构.插值表达式.文本指令.事件指令] 1)定义:javascript渐进式框架 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面 ...
- Angular中的内置指令和自定义指令
NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- Vue:渲染、指令、事件、组件、Props、Slots
如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要的工具,而且没有妨碍我的工作”.每当学习 Vue 的时候,我都很高兴,因为很有意义,而且很优雅. 以上是我对 ...
- Vue.js 系列教程 1：渲染，指令，事件
原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要 ...
- 从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Vue:渲染、指令、事件、组件、Props
每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要的工 ...
- Vue系列（一）：简介、起步、常用指令、事件和属性、模板、过滤器
一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...
- Vue之挂载点、变量、事件、js对象、文本指令、过滤器、事件指令和属性指令
1.vue导入-挂载点 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&qu ...
- Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)
Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...
随机推荐
- 微信小程序主包和分包的资源可以相互引用吗
了解主包.分包 整个小程序所有分包大小不超过20M;单个分包/主包大小不能超过 2M 主包: a. 放置默认启动页面&&tabBar页面, 以及一些分包需要用到的公共资源(如wxss. ...
- 项目：口令保管箱，批处理文件配置.bat
#! python3 import sys import pyperclip PASSWORDS = {'email': 'F7minlBDDuvMJuxESSKHFhTxFtjVB6', 'blog ...
- adb shell input keyevent 控制按键输入的数值
数值xx如下 KEYCODE_CALL 进入拨号盘 5KEYCODE_ENDCALL 挂机键 6KEYCODE_HOME 按键Home 3KEYCODE_MENU 菜单键 82KEYCODE_BACK ...
- jquery的ajax方法获取不到return返回值
/** 2 * 方式:(1)同步调用 (2)在ajax函数中return值 3 * 结果:返回 1.未成功获取返回值 4 * 失败原因:ajax内部是一个或多个定义的函数,ajax中return返回值 ...
- CSS选择艺术以及CSS文本样式
CSS选择的艺术1.css规则由两部分构成:选择器,声明(声明由属性和值构成且末尾跟一个分号)2.css注释:/*--*/3.CSS样式的引用(1)行内样式(内联样式)例如:<p style=& ...
- 帝国CMS 登录后跳转ecmsadmin.php 白页 多个解决方案
帝国CMS 6.6 版本, 运维的网站查询除了问题, 把网站数据库和整体网站拷贝到本地服务器, 配置好 e/config/config.php 和 e/class/config.php 两个目录 ...
- 用javassist和CGLIB 解决JDK动态代理的缺陷
用 javassist 解决 JDK 动态代理的缺陷 JDK动态代理的缺陷 要求目标类必须实现接口,否则产生不了代理.有些场景下,目标类也要产生代理类但是木有实现接口,这个时间 Java 中有两个常 ...
- bug单建单规范
bug提单保证,清晰.简单.明了. 标题: [版本][服务器][模块][必现/偶现]bug标题(最短的话描述bug) 例:[0.9.0][dev][系统][必现]点击商店,跳转到仓库页面 bug模 ...
- PYinstall打包程序出现编码错误的解决 'utf-8' codec can't decode byte 0xce in position 171: invalid continuation b
网上说,先执行,再打包 chcp 65001 试过没有用. 解决方案: 把import的包批量注释,然后寻找是import那个文件导致. 虽然注释会导致程序运行出错,但是打包才不管你能不能运行. 最后 ...
- java中取数组第一个元素
java中取数组第一个元素 var a=[1,2,2,3,4];console.log(a);a.shift();console.log(a); pop:删除原数组最后一项,并返回删除元素的值 ...