vue计算与监听——只保留两位小数的方法

vue计算(计算属性)
vue中computed的作用：从已经有的数据计算出新的数据 (到视图层去使用！)。

<div id="app">
  <p>元字符串：{{message}}</p>
  <p>反转字符串：{{reverseMessage}}</p>
  <p>
    价格<input type="text" v-model="number">
    价格<input type="text" v-model="numberMod1">
    价格<input type="text" v-model="numberMod2">
  </p>
</div>

JavaScript

var vm =
  new Vue({
    //模板选择器
    el: '#app',
    //数据中心
    data: {
      message: 'hello',
      number: 3.1415926
    },
    //计算属性
    computed: {
      reverseMessage: function () {
        // 对data中的message进行操作
        return this.message.split('').reverse().join('')
      },
      numberMod1: function () {
        //分析: (1）找到字串’."的在字符串中首次出现位置;
        // (2)然后从这个位置，往后顺延到小数点后面的2位那个位置。
        // (3）从字符串e位置开始截取内容，截取到指定索引位置上。
        return Math.floor(this.number * 100) / 100;
      },
      numberMod2: function () {
        // 金额小数部分保留2位
        // 分析： （1）先将这个数乘以100，让小数部分向上 进2位。
        // （2）把这个数 向下 取整
        // （3）再把这个数 除以100，小数点部分向后取 2位
        return Math.floor(this.number * 100) / 100
      }
    },
    //方法中心
    methods: {}
  })

代码演示：