vue-cli: v-on事件绑定的用法

一. v-on事件绑定

<template><div><h1>v-on 事件的绑定</h1><div>{{number}}</div><!-- 标准写法 --><button v-on:click="add">加1</button><!-- 简写 --><button @click="reduce">减1</button><!-- 事件传递参数, $event 为事件对象 --><button @click="reduce(2,$event)">减2</button><hr><div v-if="isShow">isSho is true</div><div v-else>isSho is false</div><button @click="toggle">切换isShow</button><hr><ul :style="{textAlign:'left'}"><li v-for="news in newsList" :key="news.id">{{news.title}}</li></ul><button @click="addNews">添加新闻</button><button @click="removeNews">删除新闻</button><button @click="updateNews">修改第一条新闻</button><hr><!-- v: value, k: key, i: index --><div v-for="(v,k,i) in obj" :key="k">{{i}} -- {{k}} -- {{v}}</div><button @click="addAttr()">add attr</button><button @click="removeAttr()">reomve attr</button><button @click="updateAttr()">update attr</button></div>
</template><script>
export default {name: "demo5",data() {return {number: 1,isShow: true,newsList: [{id: 1,title: "新闻第1则"},{id: 2,title: "新闻第2则"},{id: 3,title: "新闻第3则"},{id: 4,title: "新闻第4则"}],obj: {name: "zhangsan",age: "33",sex: "man"}};},methods: {add(event) {console.log(event);this.number++;},reduce(val, event) {console.log(event);if (typeof val === "number") {// 表示传递时数字类型"number", 不是字符串, 不是变量this.number -= val;} else {this.number--;}},toggle() {// 取反this.isShow = !this.isShow;},addNews() {this.newsList.unshift({ id: Date.now(), // 当前时间title: "添加一条新新闻" });// unshift 在数组前面插入一条},removeNews() {this.newsList.pop();// pop 删除最后一条, remove 删除第一条},updateNews() {// this.newsList[0].title = "修改了第一条新闻的标题",this.$set(this.newsList, 0, {id: Date.now(),title: "修改了第一条新闻"});},addAttr() {this.$set(this.obj, "吃饭，睡觉，撸啊撸");},removeAttr() {let _obj = { ...this.obj }; // 原生Js中定义对象, 将obj赋值给_obj, delete _obj.age; // 从中删除对象中的属性this.obj = { ..._obj }; // 重新赋值, 曲线救国},updateAttr() {this.obj.age = 30; // 属性值直接修改}}
};
</script>

vue-cli: v-on事件绑定的用法相关推荐

vue样式操作与事件绑定
Vue笔记 1 Vue实例 (VM) var vm = new Vue({ el:'#app', //挂载元素 //数据 data: { title:'值', .... dataList:[] }, ...
vue.js的一些事件绑定和表单数据双向绑定
知识点: v-on:相当于: 例如:v-on:click==@click ,menthods事件绑定 v-on修饰符可以指定键盘事件v-model进行表单数据的双向绑定 <template> ...
vue.js中的事件绑定-01笔记
之前发生了一个错误,事件绑定一直不成功,就是下面的错误代码 <div id="app">当前计数:{{count}}<button v-if="0&qu ...
VUE（template标签事件绑定与监听）
一.template标签 Vue.js提供了template标签,可以将指令作用到这个标签上,对其子元素进行渲染,但最后渲染的结果里不会有它. 二.事件绑定与监听 1.方法与内联语句处理器 1)Vue ...
Vue事件绑定（非常详细哦~）
下面是对Vue中事件绑定的整理,希望可以帮助到有需要的小伙伴~ 事件绑定 vue如何处理事件 v-on指令用法 <input type= 'button"v-on:click=&quo ...
vuejs学习笔记（1）--属性，事件绑定，ajax
本文转自:http://www.cnblogs.com/shuai5288/archive/2017/04/05/6670923.html 属性 v-for 类似于angular中的 ng-repea ...
Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...
Vue学习2 - 事件处理以及绑定、事件、遍历、判断、元素显示、DOM属性的绑定、comput计算属性值
文章目录 1. 事件处理.以及Vue生命周期函数.事件描述符 1.1 基本用法 1.2 获取事件对象,阻止默认行为.事件冒泡行为.事件描述符 2. for循环 2.1 基本数据类型数组的遍历 2.2 ...
Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式点击按钮 ...

vue-cli: v-on事件绑定的用法

一. v-on事件绑定

vue-cli: v-on事件绑定的用法相关推荐

最新文章

热门文章

vue-cli: v-on事件绑定 的用法

一. v-on事件绑定

vue-cli: v-on事件绑定 的用法相关推荐

最新文章

热门文章

vue-cli: v-on事件绑定的用法

vue-cli: v-on事件绑定的用法相关推荐