倒转字符串

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue.js的计算属性</title>

    <script type="text/javascript" src="./js/vue.js"></script>

    <script type="text/javascript">

    window.onload = function(){

        //建立vue对象

        var app = new Vue({

            el:"#a",

            data:{

                message : "你好吗"

            },

            computed:{

                reverseMessage:function(){

                    return this.message.split('').reverse().join('')

                }

            }

        });

        var a = new Vue({

            el:"#q",

            data:{

                message:"你是谁"

            }

        });

    }

    </script>

</head>

<body>

    <div id="a">

    <!-- 颠倒字符串 -->

    {{ message }}<br/>

    {{ reverseMessage }}

    </div>

    <div id="q">

    {{message.split('').reverse('').join('')}}

    </div>

</body>

</html>

简单的Vue计算属性的更多相关文章

  1. Vue计算属性

    github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...

  2. 在做vue计算属性，v-for处理数组时遇到的一个bug

    bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...

  3. vue教程2-03 vue计算属性的使用 computed

    vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...

  4. vue 计算属性 实例选项 生命周期

    vue 计算属性: computed:{} 写在new vue()的属性,只要参与运算,数据不发生变化时,次计算只会执行一次,结果缓存,之后的计算会直接从缓存里去结果.如果其中的值发生变化(不管几个) ...

  5. Vue计算属性缓存(computed) vs 方法

    Vue计算属性缓存(computed) vs 方法 实例 <div id="example"> <p>Original message: "{{ ...

  6. vue 计算属性实现过滤关键词

    效果 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

  7. Vue 计算属性 && 监视属性

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  8. Vue#计算属性

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

  9. vue计算属性详解——小白速会

    一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...

随机推荐

  1. JuJu团队11月30号工作汇报

    JuJu团队11月30号工作汇报 JuJu   Scrum 团队成员 今日工作 剩余任务 困难 于达  提供类似generator的数据产生接口  改进代码  对julia不够熟悉 婷婷  和队友一起 ...

  2. <深入理解redis>读书笔记

    chapter2 键管理与数据结构 对大多数redis解决方案而言,键的命名设计至关重要.对于管理来说,内存消耗和redis性能都与数据结构设计相关.所以对开发者而言,最好有数据结构的命名文档规范. ...

  3. 2020/2/22 74cms3.5.1 代码审计

    0x00 网站结构 简单试了一下.每一个模块还是比较清楚的,分别对应网站的一个模块.还有一些没有权限访问 0x01 通读代码 先看入口文件,index.php 开头先对网站是否安装做了判断 然后就是判 ...

  4. Ubuntu19.04的安装过程详解以及操作系统初始化配置

    Ubuntu19.04的安装过程详解以及操作系统初始化配置                                                                       ...

  5. POJ 2305：Basic remains 进制转换

    Basic remains Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5221   Accepted: 2203 Des ...

  6. usb摄像头驱动的移植

    相关软件下载地址:http://pan.baidu.com/s/16yo8Y 1.使用摄像头型号ov9650 ①修改.配置内核 1.修改vi drivers/i2c/busses/Kconfig (参 ...

  7. nodejs学习笔记（一）：centos7安装node环境

    由于windows环境安装nodejs只需要访问官方网站下载压缩包,解压即可. 首先检查自己是否安装==wget==,已安装可以跳过这步,未安装则需要先安装: linux yum install -y ...

  8. Idea 打印GC

    设置 Run ⇒ Edit Configurations ⇒ VM options 添加 -XX:+PrintGCDetails 运行程序后会在末尾打印GC信息 2019-11-02 13:07:47 ...

  9. eclipse 下配置安卓环境

    建议你看博客  http://blog.csdn.net/sinat_21184471/article/details/76131141  其中一些细节问题,我会根据我犯过的错误说明一下的!!!! 它 ...

  10. jupiter的@TempDir 等不生效

    jupiter与junit是 完全独立的测试组件,要严防在测试中将二者混用.最好在依赖引入jupiter 时 就将junit的依赖干掉,以防在写测试用例时将二者混用.不会报错,但是会导致 jupite ...