vue中的计算属性实例详解
什么是计算属性
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
<div id="example"> {{ message.split('').reverse().join('') }} </div>
这里的表达式包含3个操作,并不是很清晰,所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理。
计算属性(computed)用于处理复杂逻辑
computed:{ }
computed做为vue的选项是固定的
例子:
<div id="itany"> <p>{{mes}}</p> <p>{{count}}</p> </div> <script src="../js/vue.js"></script> <script> new Vue({ el:'#itany', data:{ mes:'hello vue' }, computed:{ count:function(){ //切割 翻转 拼接 return this.mes.split(' ').reverse().join('---') } } }) </script>
输出结果为:
hello vue
vue---hello
练习
要求:点击button按钮使数字以对应的价格改变
Image 2.png
代码如下:
<div id="itany"> <button v-on:click="num">总和</button> <p>{{arr}}</p> </div> <script src="../js/vue.js"></script> <script> new Vue({ el:'#itany', data:{ name:{price:2,count:0}, names:{price:4,count:0}, see:true }, methods:{ num:function(){ this.name.count++, this.names.count++ } }, computed:{ arr:function(){ return this.name.price*this.name.count+this.names.price*this.names.count } } }) </script>
相关推荐
-
Vue计算属性的使用
我们都知道在Vue构造函数的参数对象中有一个[data]属性,该属性值是一个对象,该对象是对数据的代理,是一个键值对并且时刻与页面表现是一致的,但是这里面只能是简单的键值对,不能拥有业务逻辑,并且由于[data]中的属性属于同一个生命周期,所以如果我们需要某一个属性是依赖于另外一个属性时,在[data]中是做不到的,于是Vue为我们提供了[计算属性] 一.计算属性 1.1 概述 计算属性归根结底也是属性,它也是跟表现层是时刻同步的,虽然我们可以在插值中对数据进行各种处理,但是插值中的表达式处理毕
-
Vue.js第三天学习笔记(计算属性computed)
今天给大家分享下vue.js中的计算属性(computed) 示例一 computed的get属性 html: <template> <div class="input-text"> <input type="text" v-model='firstName'> <input type="text" v-model='lastName'> {{fullName}} </div> <
-
Vue.js每天必学之计算属性computed与$watch
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一个表达式的逻辑,应当使用**计算属性**. 基础例子 <div id="example"> a={{ a }}, b={{ b }} </div> var vm = new Vue({ el: '#example', data: { a: 1 }, comp
-
Vue中计算属性computed的示例解读
计算属性 表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且难以维护,所以引入了计算属性computed,将复杂的逻辑放入计算中进行处理,同时computed有缓存功能,防止复杂计算逻辑多次调用引起的性能问题. computed原理 computed的属性reversedMessage在data中会有一个对我们不可见的cacheReversedMessage属性对应 cacheReversedMessage的值是根据其绑定的data中的message来决定的
-
Vue computed计算属性的使用方法
computed computed:相当于method,返回function内return的值赋值在html的DOM上.但是多个{{}}使用了computed,computed内的function也只执行一次.仅当function内涉及到Vue实例绑定的data的值的改变,function才会从新执行,并修改DOM上的内容. computed和method的对比 <div id="example"> {{ message.split('').reverse().join('
-
详解Vue的computed(计算属性)使用实例之TodoList
最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组件的方法,不同的是vue采用的与html绑定事件. 给个例子 /*html*/ <input type="button" value="点击" v-on:click='handlClick' id="app"> /*js*/ var ap
-
vue中的计算属性实例详解
什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 这里的表达式包含3个操作,并不是很清晰,所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理. 计算属性(computed)用于处理复杂逻辑 computed:{ } compu
-
vue中使用codemirror的实例详解
这篇文章在vue里使用codemirror遇到的问题,写的很不错,还有下载的方法,大家可以点击查看. 以下是自己使用过的,做出来的例子: 做出来的效果图: 记住使用之前要npm下载哦 npm install vue-codemirror --save main.js import { codemirror } from 'vue-codemirror' import 'codemirror/lib/codemirror.css' Vue.use(VueCodemirror) 再到组件中使用 im
-
发布订阅模式在vue中的实际运用实例详解
订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象.这个主题对象在自身状态变化时,会通知所有订阅者对象,使它们能够自动更新自己的状态. 比如addEventListener 这个api就是个发布订阅模式 如果用过vue的同学,可以把他类比于 watch 下面我们看一个例子 var observe={ fnsObj:{}, // 订阅方法 on:function(key,fn){ if(!observe.fnsObj[key]){ observe.fnsObj[key]
-
关于Vue中axios的封装实例详解
前言 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 作为一个优秀的 HTTP 库,axios 打败了曾经由 Vue 官方团队维护的 vue-resource,获得了 Vue 作者尤小右的大力推荐,成为了 Vue 项目中 HTTP 库的最佳选择. 虽然,axios 是个优秀的 HTTP 库,但是,直接在项目中使用并不是那么方便,所以,我们需要对其进行一
-
Vue中inheritAttrs的使用实例详解
今天举一个例子解释一下inheritAttrs的使用 先看代码 <body> <div id="app" class="vueclass"> <my-com title="标题" wx-attr1="未定义属性1" wx-attr2="未定义属性2"></my-com> </div> <script type="text/javas
-
vue中tinymce的使用实例详解
目录 1.下载 2.在node_modules中找到 3.在public中新建 tinymce 文件夹 4.在components文件夹中新建tinymce.vue 5.使用 TinyMCE是流行的富文本编辑JavaScript库.TinyMCE Vue是TinyMCE官方发布的Vue组件,可以更轻松地在Vue应用程序中使用TinyMCE. 1.下载 npm i tinymce@5.10.3 @tinymce/tinymce-vue@3.2.8 -S 2.在node_modules中找到 (我这
-
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
这两个属性都是Object.prototype所提供:Object.prototype.hasOwnProperty()和Object.prototype.isPropertyOf() 先讲解hasOwnProperty()方法和使用.在讲解isPropertyOf()方法和使用 看懂这些至少要懂原型链 一.Object.prototype.hasOwnProperty() 概述 hasOwnProperty()方法用来判断某个对象是否含有指定的自身属性 语法 obj.hasOwnPropert
-
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({// 选项}) 虽然没有完全遵循 MVVM 模型,Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例. 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({}); 2.实例化Vue时,需要传入一个参数(选项
-
vue数据初始化initState的实例详解
数据初始化 Vue 实例在建立的时候会运行一系列的初始化操作,而在这些初始化操作里面,和数据绑定关联最大的是 initState. 首先,来看一下他的代码: function initState(vm) { vm._watchers = []; var opts = vm.$options; if(opts.props) { initProps(vm, opts.props); //初始化props } if(opts.methods) { initMethods(vm, opts.method
-
Vue实现星级评价效果实例详解
我们把星级评价单独做成一个Star组件,抽离出来,其中父组件中引入(传入的是评分的值) <div class="score"> <Star :score="poiInfo.wm_poi_score"></Star> </div> 初始Star.vue <template> <div> <div class="star"> <span class="
随机推荐
- localStorage的黑科技-js和css缓存机制
- Centos7.2下使用YUM快速安装MySQL5.7的方法
- java使用spring实现发送mail的方法
- ABP框架的体系结构及模块系统讲解
- 调整PHP的性能
- 深入解析Python中的变量和赋值运算符
- 深入解析Go语言中for循环的写法
- 功能强大的PHP图片处理类(水印、透明度、旋转)
- js 事件处理函数间的Event物件是否全等
- JavaScript获取flash对象与网上的有所不同
- javascript 获取元素位置的快速方法 getBoundingClientRect()
- PHP中preg_match正则匹配中的/u、/i、/s含义
- js实现百度登录框鼠标拖拽效果
- 在机上创建一个用户的批处理
- jQuery探测位置的提示弹窗(toolTip box)详细解析
- jquery实现可拖拽弹出层特效
- 通过jQuery源码学习javascript(三)
- RN在Android打包发布App(详解)
- 用PHP连接Oracle数据库
- 利用selenium 3.7和python3添加cookie模拟登陆的实现