Vue-计算属性与事件监听

计算属性

1、基本使用

<div id="app"><h2>{{getName()}}</h2><!--计算属性--><h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: 'hello',firstName: 'qi',lastName: 'jing'},/*计算属性  */computed: {fullName: function(){return this.firstName+' ' + this.lastName}},methods: {getName: function(){return this.firstName+' '+this.lastName}}})
</script>

2、复杂使用

<div id="app"><h2>总价格：{{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: 'hello',books: [{id: 1, bookName:'深入计算机原理',price: 123},{id: 2, bookName:'深入计算机原理',price: 124},{id: 3, bookName:'深入计算机原理',price: 125},{id: 4, bookName:'深入计算机原理',price: 126},]},computed: {totalPrice: function (){// let result = 0;// for(let i = 0;i<this.books.length;i++){//   result += this.books[i].price;// }// return result;return this.books.reduce((a,b)=>a+b.price,0)}}})
</script>

事件监听

1、基本使用

<div id="app"><h2>{{count}}</h2><button @click="increment()">+</button><button @click="decrement()">-</button>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {count: 0},methods: {increment() {this.count++;},decrement() {this.count--;}}})
</script>

2、参数问题

<div id="app"><button @click="btn01('abc')">按钮1</button><!--在事件定义时，写方法省略了小括号，但是方法本身是需要一个参数的，VUE会默认将浏览器生产的event事件对象作为参数传入方法中--><button @click="btn02">按钮2</button><!--方法定义时，既需要普通参数，又需要event参数时 $event--><button @click="btn03('12121',$event)">按钮3</button>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: 'hello'},methods :{btn01(str) {console.log('-----',str);},btn02(str) {console.log(str);},btn03(str,event) {console.log(str,event);}}})
</script>

3、修饰符

<!--1、.stop修饰符的使用-->
<div id="app" @click="divClick()">aaa<button @click.stop="btnClick()">按钮</button><!--2、 prevent修饰符的使用--><form action="baidu"><input type="submit" value="提交" @click.prevent="submitClick" ></form><!--3、监听某个按键--><input type="text" @keyup.enter="keyUp"><!--4、只让按钮在第一次有用--><button type="button" @click.once="onceClick">按钮</button>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: 'hello'},methods: {divClick() {console.log('divClick');},btnClick() {console.log('btnClick');},submitClick() {console.log('submitClick');},keyUp() {console.log('keyUp');},onceClick() {console.log('onceClick');}}})
</script>

Vue-计算属性与事件监听相关推荐

vue计算属性computed与监听属性watch的基本使用
目录 Vue.js 计算属性 Vue.js 监听属性 Vue.js 计算属性计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 反转字符串的示例 <!DOCTYPE ...
class07：表单、计算属性、watch监听
这里写目录标题一.表单 1. 表单输入绑定二.配置对象 1. 计算属性 2. computed 和 methods 的区别 3. watch监听 a. 单一属性监听 b. 监听对象中的属性 c. ...
vue学习记录-05 事件监听
vue学习记录-05 事件监听这篇文章是根据codewhy老师在b站的视频进行的学习记录文章目录 vue学习记录-05 事件监听一.v-on的基本使用二.v-on的参数问题 1.方法不需要参数 ...
html中事件监听的使用,Vue.JS入门篇--事件监听
你可以使用 v-on 指令来绑定并监听 DOM 事件.绑定的内容可以是一个当前实例上的方法 (后面无需跟括号) 或一个内联表达式.如果提供的是一个方法,则原生的 DOM event 会被作为第一个参数 ...
vue中的v-on事件监听机制
监听dom事件使用v-on指令: v-on:事件类型="一个函数" 这个事件类型可以自定义简写: @事件类型="一个函数"⭐ 1.作用:绑定事件监听,表达式可 ...
vue笔记（二）Vue-class与style、事件、计算属性、数据监听、指令+自定义指令、过滤器
vue官网一 .class.style操作二.事件三.计算属性四.数据监听.观测五.指令+自定义指令六.过滤器一 .class.style操作官网 1. class使用: (1)v-b ...
Vue的计算属性computed和监听属性watch
Vue的计算属性computed 定义通过已有属性计算生成一个新的组合属性. 原理底层借助了Object.defineproperty方法提供的getter和setter来实现. 性质计算属性的 ...
vue计算属性computed和侦听属性watch的用法和区别
计算属性computed是基于响应式进行缓存,所以在执行的时候效率高,且只执行一次,从缓存读取,除非data里面的数据有更改才重新调用.注意:计算属性里面必须要ruturn,否则无法拿到结果.计算属性 ...
oclick vue 传参函数_详解Vue计算属性和侦听属性
关注[搜狐技术产品]公众号,第一时间获取技术干货作者介绍: 本期特邀作者:浪里行舟 Github博客2600 star作者,专注于前端领域.个人公众号:「前端工匠」,致力于打造适合初中级工程师能够快 ...
5.Vue 计算属性和侦听器
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. 5.Vue 计算属性和侦听器 ...

Vue-计算属性与事件监听

计算属性

事件监听

Vue-计算属性与事件监听相关推荐

最新文章

热门文章