Vue.js的学习记录_6

末蓝、 2022-03-09 17:42 136阅读 0赞

### 计算的特性 ###

*  vue.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Computed Properties</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <h1>Computed Properties</h1>
        <div id="Vue-app">
            <button v-on:click = "a++"> Add to A</button>
            <button v-on:click = "b++">Add to B</button>
            <p>A - {
       {a}}</p>
            <p>B - {
       {b}}</p>
            <p>Age + A = {
       {addToA}}</p>
            <p>Age + B = {
       {addToB}}</p>
        </div>
        <script src="app.js"></script>
    </body>
    </html>

*  vue.js

new Vue ({ 
        el: '#Vue-app',
        data: { 
            age : 20,
            a: 0,
            b: 0
        },
        methods: { 
            /*addToA: function () { console.log('AddToA'); return this.a + this.age; }, addToB: function () { console.log('AddToB'); return this.b + this.age; } */
        },
        computed: { 
            addToA: function () { 
                console.log('AddToA');
                return this.a + this.age;
            },
            addToB: function () { 
                console.log('AddToB');
                return this.b + this.age;
            }
        }
    })

### `记录` ###

*  主要学习了在v-on：click中可以直接对变量进行计算++、- -；
 *  也可以自己在computed中写函数进行自动计算,这个也对比了在methods中的函数作用，在methods中会对所有的函数都进行计算，而在methods中只对自己产生了作用。

发表评论取消回复

表情：

评论列表（有 0 条评论，136人围观）

还没有评论，来说两句吧...

相关阅读

相关 Python学习记录——6.循环语句

1.循环前导循环语句允许我们执行一个语句或语句组多次，在Python中提供了for循环和while循环（在Python中没有do…while循环）: <table>

心已赠人/ 2023年06月09日 07:54/ 0 赞/ 3 阅读

相关 Vuejs——（6）Vuejs与form元素

资料来于官方文档： http://cn.vuejs.org/guide/forms.html 本文是在官方文档的基础上，更加细致的说明，代码更多更全。简单来说，更

深藏阁楼爱情的钟/ 2022年07月18日 00:14/ 0 赞/ 303 阅读

相关 vuejs初次学习入门

不得不说我对前端技术还是有追求的，这几天了解了下vuejs，记点笔记 vuejs是一个mvvm框架，博主以java开发为主，后台的mvc模式可以说是web开发的标配，没想

今天药忘吃喽~/ 2022年07月11日 07:29/ 0 赞/ 270 阅读

相关 VueJs学习汇总

最近更新时间：2017年6月2日16:58:06 [《我的博客地图》][Link 1] 前端的框架很多，需要不断的摸索和学习，截止20170602已经接触和使

落日映苍穹つ/ 2022年06月15日 12:11/ 0 赞/ 446 阅读

相关 vuejs学习笔记

把一个对象所有元素打印出来对象： editRoomData: { id: "", roomNo:""

Bertha 。/ 2022年05月01日 12:10/ 0 赞/ 223 阅读

相关 Objective-C 学习记录6--dictionary

[Objective-C 学习记录6--dictionary][Objective-C _6--dictionary] 1.NSDictionary 和NSMutable

悠悠/ 2022年04月23日 00:18/ 0 赞/ 159 阅读

相关 Vue.js的学习记录_6

计算的特性 vue.html <!DOCTYPE html> <html lang="en"> <head> <meta

末蓝、/ 2022年03月09日 17:42/ 0 赞/ 137 阅读

相关 6、vueJs基础知识06

vue动画　　transition 之前1.0版本是以属性的形式展示的　　　　<p transition="fade"></p> 　　　　.fade-transi

淡淡的烟草味﹌/ 2021年11月11日 03:28/ 0 赞/ 289 阅读

相关前端学习记录 Day6（Ajax）

文章目录 Day 6 前导知识简介作用伪实现实现使用Spring MVC实现返回集合注册

曾经终败给现在/ 2021年11月10日 04:48/ 0 赞/ 338 阅读

相关 Vue+element+Nodejs学习记录（6)

1.axios拦截 axios拦截就是axios的二次封装，这样便于权限管理和统一异常处理，全局拦截器可以根据接口错误码进行统一处理，而不需要再每一个接口内部进行控制，第二个

「爱情、让人受尽委屈。」/ 2021年11月05日 18:08/ 0 赞/ 249 阅读