倒转字符串

<!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. window安装dlib、face_recognition

    face_recognition简介 face_recognition是Python的一个开源人脸识别库,支持Python 3.3+和Python 2.7.引用官网介绍: Recognize and ...

  2. 十五、React：简单点餐实例：知识点，html解析写法

    一.功能 从首页列表点进去,转到详情页 列表.详情从Api获取 Api列表:http://a.itying.com/api/productlist 详情:http://a.itying.com/api ...

  3. ACM-寻宝

    题目描述:寻宝 有这么一块神奇的矩形土地,为什么神奇呢?因为上面藏有很多的宝藏.该土地由N*M个小正方形土地格子组成,每个小正方形土地格子上,如果标有“E”,则表示该格可以通过:如果标有“X”,则表示 ...

  4. 学习进度05（billbill长评爬取02）

    今天下雪了,是个看<白色相簿2>的好日子. 昨天我们获取所有长评url,今天要解析这些url获取更多的信息随便,点开一个,我们需要的数据有标题,时间,内容.点赞数和评论先不弄了. 解析js ...

  5. DragonFlyBSD 5.6 RC1 发布

    导读DragonFlyBSD操作系统下一个主要版本的第一个候选版本RC1现在可以进行测试.DragonFlyBSD 5.6将成为一个功能更新的版本,该功能更新将于周二晚上发布,是第一个候选版本,同时将 ...

  6. cf 398B. Painting The Wall

    23333,还是不会..%%%http://hzwer.com/6276.html #include <bits/stdc++.h> #define LL long long #defin ...

  7. Java基础（接口，list和ArrayLIst）

    1,使用接口的目的:不是10类都有getName()方法,则10个类都继承一个接口来实现.接口本身是一种规范,在具体业务有需求的时候才用接口. 具体例子: I充电设备 x = new 手机(" ...

  8. Babel（1）认识Babel

    阅读文档 Babel中文网 关于 Babel 你必须知道的 如何写好.babelrc?Babel的presets和plugins配置解析 不容错过的 Babel 7 知识汇总 一口(很长的)气了解 b ...

  9. CentOS 7 下oracle 11G R2 ADG 搭建

    本文记录ADG搭建操作步骤,首先在虚拟机CentOS中安装并配置好oracle 11g R2(具体安装步骤在我的另一篇博客中),然后拷贝一份虚拟机,修改新虚拟机的主机名和ip配置,这时候主库和备库是一 ...

  10. 51nod 1022 石子归并 环形+四边形优化

    1022 石子归并 V2 基准时间限制:1 秒 空间限制:131072 KB 分值: 160 难度:6级算法题  收藏  关注 N堆石子摆成一个环.现要将石子有次序地合并成一堆.规定每次只能选相邻的2 ...