其实在摸板中也是可以做简单的计算的,但是会看起来会很乱 ,可以用computed来做计算

  1.   <!DOCTYPE html>
  2.     <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.         <title>Document</title>
  8.         <div id="app">
  9.         {{ message }}
  10.         {{getAll}}
  11.         </div>
  12.     </head>
  13.     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  14.     <body>
  15.         <script>
  16.         var app = new Vue({
  17.             el: '#app',
  18.             data: {
  19.                 message: 'Hello Vue!',
  20.                 initDate:2
  21.             },
  22.             computed:{
  23.                 getAll:function () {   //取一个随便的数来
  24.                     return this.initDate*2
  25.                 }
  26.             }
  28.         })
  29.         </script>
  30.     </body>
  31.     </html>

computed的用法的更多相关文章

  1. vue 3 学习笔记 (七)——vue3 中 computed 新用法

    vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 ...

  2. watch和computed的用法区别是什么？

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...

  3. vue2 computed set与get函数

    大家都知道computed简单的使用方法,这儿只分享一下setter和getter用法: setter:设置值时触发. getter:获取值时触发,与setter是没有必然联系的. <templ ...

  4. Vue核心知识——computed和watch的细节全面分析

    computed和watch的区别 computed特性 1.是计算值,2.应用:就是简化tempalte里面{{}}计算和处理props或$emit的传值,computed(数据联动).3.具有缓存 ...

  5. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

  6. 基于vue2.0原理-自己实现MVVM框架之computed计算属性

    基于上一篇data的双向绑定,这一篇来聊聊computed的实现原理及自己实现计算属性. 一.先聊下Computed的用法 写一个最简单的小demo,展示用户的名字和年龄,代码如下: <body ...

  7. vue3中使用computed

    演示示例(vant组件库的轮播图): <van-swipe :loop="false" :width="150" class="my-Swipe ...

  8. vue3 高阶 API 大汇总，强到离谱

    高阶函数是什么呢? 高阶函数英文名叫:Higher Order function ,一个函数可以接收一个或多个函数作为输入,或者输出一个函数,至少满足上述条件之一的函数,叫做高阶函数. 前言 本篇内容 ...

  9. Vue3 中有哪些值得深究的知识点？

    众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点.喜欢的话建议收藏,点个关注! 1.createApp vue2 和 vue3 在创建实例 ...

随机推荐

  1. 四 python中关于OOP的常用术语

    抽象/实现 抽象指对现实世界问题和实体的本质表现,行为和特征建模,建立一个相关的子集,可以用于 绘程序结构,从而实现这种模型.抽象不仅包括这种模型的数据属性,还定义了这些数据的接口. 对某种抽象的实现 ...

  2. react之高阶组件（二）

    高阶组件的使用 接上文———— 一.像函数一样直接调用 import React, { Component } from 'react' import A from './A' class C ext ...

  3. karma mocha angular angular-mock 测试

    describe('工具方法测试', function () { var utilsModule; beforeEach(function () { module('Admin'); // modul ...

  4. Programming Principles and Practice Using C++ Notes2

    第三章对象.类型和值 对象:用来保存一个指定类型值的一些内存单元. 类型:定义一组可能的值与一组运算(对于一个对象). 值:根据一个类型来解释的内存中的一组比特. #include <iostr ...

  5. 安装g++

    :yum install g++ 错误 :No package g++ available :yum install gcc-c++ Complete!

  6. python爬虫 urllib模块url编码处理

    案例:爬取使用搜狗根据指定词条搜索到的页面数据(例如爬取词条为‘周杰伦'的页面数据) import urllib.request # 1.指定url url = 'https://www.sogou. ...

  7. Python学习日记(九) 装饰器函数

    1.import time a.time.time() 获取到当前的时间,返回值为浮点型 import time print(time.time()) #1565422783.6497557 b.ti ...

  8. PHP传引用/作用域 问题

    $arr = [1,2,3]; foreach($arr as &$v) { //nothing todo. } foreach($arr as $v) { //nothing todo. } ...

  9. ymPrompt简介

    ymPrompt从最简单的1.0版本到现在的4.0版本,代码共经历了四次较大的改动,组件在功能上有了很大的改进,应用灵活度更大,可应用环境的环境更加广泛,特别在4.0版本中加入对遮罩显示隐藏.按钮/图 ...

  10. Java8 Stream 流使用场景和常用操作

    JAVA8内置的函数式编程接口应用场景和方式 pojo类对象和默认创建list的方法 import lombok.AllArgsConstructor; import lombok.Data; imp ...