<!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. 嵌入式4412开发板学习知识-Linux系统基础知识

    1. 什么是Linux系统编程 Linux系统编程分为三个部分:系统调用.C库和C编译器. 系统调用系统编程的基础是系统调用,也结束于系统调用.在带有操作系统的嵌入式开发中,需要从操作系统申请一些服务 ...

  2. v-module绑定vuex里面的数据

    当在严格模式中使用 Vuex 时,在属于 Vuex 的 state 上使用  v-model  会比较棘手: <input v-model="obj.message"> ...

  3. nginx常用指令

    ./nginx #打开 nginx nginx -s reload|reopen|stop|quit #重新加载配置|重启|停止|退出 nginx nginx -t #测试配置是否有语法错误 ngin ...

  4. Codeforces891C(892E)

    传送门:here 简述题意:                                                                                       ...

  5. Linux 如何通过命令查看一个文件的某几行(中间几行或最后几行)

    linux 如何显示一个文件的某几行(中间几行) [一]从第3000行开始,显示1000行.即显示3000~3999行 cat filename | tail -n +3000 | head -n 1 ...

  6. linux CPU动态调频【转】

    转自:https://www.xuebuyuan.com/2185926.html 针对sep4020的linux低功耗研究也有一段时间了,基本把低功耗的实现方式想清楚了(主要分成机制和策略),这段时 ...

  7. 《Debug Hacks》和调试技巧【转】

    转自:https://blog.csdn.net/sdulibh/article/details/46462529 Debug Hacks 作者为吉冈弘隆.大和一洋.大岩尚宏.安部东洋.吉田俊辅,有中 ...

  8. Xml 文件读取

    .NET 读取Xml文件,用到XmlDocument类. 1.要获取文档的根: DocumentElement. 2.Attributes :获取 XmlAttributeCollection 包含此 ...

  9. win7经常出现“关闭xxxx前您必须关闭所有会话框”

    这可能是windows的一个BUG,在没有关闭输入法的状态下它不默认你关闭了所有窗口,只要把输入法切换回默认的英文输入法就可以正常关闭了

  10. vue中更换.ico图标报错路径找不到图片

    问题描述: vue项目中,想要更换.ico图片,更换完成后刷新页面报错,找不到路径. 解决: 更换完图片,重新启动下vue项目(npm run dev)就可以啦~ 哈哈哈 补充知识: 网页title旁 ...