Vue学习日志之指令和事件

鸭鸭 GO！

v-if：判断show的true or false

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>指令事件</title></head><body><div id="app"><p v-if="show">Welcome to Vue</p></div><script src="../vue.js"></script><script>var app=new Vue({el:"#app",data:{show:true}})</script></body>
</html>

类似于if语句，判断绑定值的true or false 进行显示

v-bind:

用途是动态更新HTML元素上的属性，例如id ，class等：
语法糖：

<a v-bind:href="url"></a>
<a :href="url"></a><img v-bind:src="imgUrl">
<img :src="imgUrl">

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>指令事件</title></head><body><div id="app"><a v-bind:href="url">welcome to vue</a><img v-bind:src="imgUrl"></div>
<script src="../vue.js"></script><script>var app=new Vue({el:"#app",data:{url:'https://www.baidu.com',imgUrl:'https://timgsa.baidu.com/xxx.jpg'}})</script></body>
</html>

v-on:

绑定事件：如点击事件，点击触发click方法，在实例中定义methods进行绑定
语法糖：

<button v-on:click="handleClose"></button>
<button @click="handleClose"></button>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>on</title></head><body><div id="app"><p v-if="show">点击下面按钮我会消失哦</p><button v-on:click="click">点击</button></div><script src="../vue.js"></script><script>var app=new Vue({el:"#app",data:{show:true},methods:{click:function(){this.show=false;                      }}})</script></body>
</html>

Vue学习日志之指令和事件相关推荐

vue学习日志-过滤器
一.过滤器 1.1 概述 (1)过滤器(Filters)提供了一种执行文本转换的方法,比如说都转换成大写字母或者几乎做任何我们想做的事情. (2)过滤器既可以在双花括号插值中使用,也可以在 v- ...
vue学习日志--3-路由基础配置
路由使用Vue Router官方路由Home | Vue Router (vuejs.org) 在存放路由的文件夹创建index.js页面首先引入createRouter和createWebHash ...
Vue学习日志之语法糖
语法糖(Syntactic sugar),也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有 ...
Vue学习日志之cli2和cli3目录结构
参考菜鸟教程代码结构https://www.runoob.com/vue2/vue-directory-structure.html 以上是vue-cli2的目录结构 vue-cli3较2有比较大的改 ...
VUE学习(二十)、插槽
VUE学习(二十).插槽一.默认插槽 1.Category.vue <template><div class="category"><h3>{ ...
Vue学习——【第五弹】
前言上一篇文章 Vue学习--[第四弹] 中学到了数据代理,这篇文章接着学习 Vue中的事件处理. 事件处理我们在学习JavaScript时就经常接触事件处理,比如在进行表单.按钮.列表折叠等操作 ...
Vue学习（入门实例、常用指令）-学习笔记
文章目录 Vue学习(入门实例.常用指令)-学习笔记实例常用指令 v-on v-bind v-for v-html v-if event v-model 双向数据绑定实现 - defineProp ...
Vue学习笔记05 组件的自定义事件-组件通信-$nextTick-脚手架解决ajax跨域-插槽-过渡动画
文章目录 Vue学习笔记05 父组件给子组件传值注意点子组件给父组件传值父组件接受子组件的传值通过函数组件的自定义事件事件绑定的第一种写法 @或v-on 事件绑定的第二种写法:使用ref ...
vue设置textarea最大字数_【Vue 学习】 Vue常用系统指令
1 v-on 指令 1.1 v-on:click 1.2 v-on:keydown 1.3 v-on:mouseover 1.4 事件修饰符 1.5 按键修饰符 2 v-text .v-html.v- ...

Vue学习日志之指令和事件

v-if：判断show的true or false

v-bind:

v-on:

Vue学习日志之指令和事件相关推荐

最新文章

热门文章