<!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. 树链剖分模板(洛谷P3384)

    洛谷P3384 #include <bits/stdc++.h> #define DBG(x) cerr << #x << " = " < ...

  2. 第19月第20天 UITableView:改变 TableHeaderView 的高度 获取目录大小

    1.UITableView:改变 TableHeaderView 的高度 CGRect newFrame = headerView.frame; newFrame.size.height = newF ...

  3. 百度地图API的应用

    做网页的时候,有时候需要有地图的功能.接下来我来记录一下我的做法. 1.引入API秘钥,在网上都可以搜到. <script src="http://api.map.baidu.com/ ...

  4. sqlite3_column_type 与 SQLITE_NULL的区别

    1. sqlite3_column_type(&stat, 1) == SQLITE_NULL 相同的情况下,只有当表为空时, 则是相同的, 如果 update table set a=&qu ...

  5. GDI+学习---1.初识GDI+

    ---恢复内容开始--- GDI+: GDI+由一组C++类实现,是对于GDI的继承,GDI+不仅优化了大部分GDI性能而且提供了更多特性.允许应用程序开发者将信息显示在显示器或者打印机上,而无需考虑 ...

  6. (1)Java数据结构--图文并茂-分析优缺点

    转:常见Java数据结构&优缺点 - /画家/ - 博客园http://www.cnblogs.com/earl-yongchang/p/5639161.html 图片也是引用过来的,没有重新 ...

  7. 【转】Python的神奇方法指南

    [转]Python的神奇方法指南 有关Python内编写类的各种技巧和方法(构建和初始化.重载操作符.类描述.属性访问控制.自定义序列.反射机制.可调用对象.上下文管理.构建描述符对象.Picklin ...

  8. FAT32文件格式示例解析

    1.前言 本文主要以一个示例来分析FAT32文件系统的格式,对FAT32文件系统的各个区域详细分析. 2.FAT32文件系统典型分区 3.FAT32文件系统示例 按如下步骤在ubuntu下创建FAT3 ...

  9. ES6学习笔记七Generator、Decorators

    Generator异步处理 { // genertaor基本定义,next()一步步执行 let tell=function* (){ yield 'a'; yield 'b'; return 'c' ...

  10. WARN: Establishing SSL connection

    在我们使用连接MySQL数据库时会出现这样的提示: Tue Aug 29 13:24:29 CST 2017 WARN: Establishing SSL connection without ser ...