<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue 计算属性的学习</title>
 <script type="text/javascript" src="./js/vue.js"></script>
 <script type="text/javascript">
 window.onload = function(){
  var app = new Vue({
   el:"#app",
   data:{
    information:'灰色的世界里，只有你的眼睛是色彩斑斓的'
   },
   computed:{
    reverseInformation:function(){
     return this.information.split('').reverse().join('')
    }
   }
  });
 }
 
 </script>
</head>
<body>
 <div id="app">
  <!-- 颠倒字符串  上面的是原版下面的是颠倒版-->
  {{information}}
  <br/><br/>
  {{reverseInformation}}
  <br/><br/>
  {{information.split('').reverse()}}
  <br/>
  {{information.split('').join('')}}
 </div>
 
</body>
</html>

vue.js的计算机属性学习的更多相关文章

  1. vue.js操作元素属性

    vue动态操作div的class 看代码: <!doctype html> <html lang="en"> <head> <meta c ...

  2. 9.Vue.js 监听属性

    本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...

  3. vue.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. vue.js事件，属性，以及交互

    这是我学习vue的第二天,今天主要学习了如何利用vue阻止事件冒泡,阻止事件的默认行为,键盘事件以及如何添加class.style这些属性,以及如何利用vue来进行数据交互,利用百度的一个API来写一 ...

  5. Vue.js官方文档学习笔记(一)起步篇

    Vue.js起步 Vue.js介绍 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库 ...

  6. 关于vue.js的计算属性练习代码

    参照官网联系如下: <!DOCTYPE html><html lang="en"><head> <meta charset="U ...

  7. vue.js实战——计算属性

    1set和get: 注意: this.lastName=names[names.length-1];//解决连续输入空格后lastName消失的问题 练习代码如下: <!DOCTYPE html ...

  8. Vue.js：计算属性

    ylbtech-Vue.js:计算属性 1.返回顶部 1. Vue.js 计算属性 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: 实例 ...

  9. Vue.js之计算属性（computed）、属性监听（watch）与方法选项（methods）

    vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.计算属性-computed 1. 作用:能够避免数据冗余,通 ...

随机推荐

  1. TensorFlow从入门到理解（三）：你的第一个卷积神经网络（CNN）

    运行代码: from __future__ import print_function import tensorflow as tf from tensorflow.examples.tutoria ...

  2. Kaldi语料的两种切分/组织方式及其处理

    text中每一个文本段由一个音频索引(indexed by utterance) 使用该方式的egs:librispeech.timit.thchs30.atc_en.atc_cn 语料的组织形式为: ...

  3. easyui 进阶之tree的常见操作

    前言 easyui是一种基于jQuery的用户界面插件集合,它为创建现代化,互动,JavaScript应用程序,提供必要的功能,完美支持HTML5网页的完整框架,节省网页开发的时间和规模.非常的简单易 ...

  4. animation属性

    文章中转站,因为涉及到动画效果,还是看文笔比较好的博主吧~ CSS3(三)Animation 入门详解 css3中变形与动画(三) CSS3 Animation 是由三部分组成. 关键帧(keyfra ...

  5. Python Django 实用小案例2

    动态导入模块 Django返回序列化数据  动态导入模块 在Django里面,经常会看到一些方法或者类是动态导入,尤其是以settings文件为代表,经常把一些类放在里面动态调配,比如随便拿Djang ...

  6. python基础类知识~pymysql封装类

    一简介:咱们来介绍下 DBA常用的几个类 二 具体代码 #!/usr/bin/python3import pymysqlimport sysclass DBHelper: def __init__(s ...

  7. C++ 模式设计

    只写了MinGw/Linux API部分.所有相关的代码都是参考C++ API C++ 11智能指针参考http://blog.csdn.net/zy19940906/article/details/ ...

  8. Shell-自动建立全国城市

    Code: #!/bin/bash function mkdirFun() { if [ ! -d $1 ];then mkdir -p $1 fi } filename=city1.txt date ...

  9. Epoll模型【转】

    转自:https://www.cnblogs.com/tianhangzhang/p/5295972.html 相比于select,epoll最大的好处在于它不会随着监听fd数目的增长而降低效率.因为 ...

  10. python 字典不区分大小写工具类

    # -*- coding: utf-8 -*- # @Time : 2018/12/20 4:28 PM # @Author : cxa # @File : DictHelper.py # @Soft ...