计算属性 computed:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <div id="app">
    <p>原来的小数: {{ float_number }}</p>
    <p>计算过的动态属性(整数): {{ int_number }}</p>
  </div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el: ‘#app‘,
        data: {
          float_number: 3433.45
        },
        computed: {    //computed  是计算属性(翻译:计算的)  属性名不可改
          int_number: function () {    //这里定义的int_number不再当做方法使用,而是一个属性,
            return parseInt(this.float_number);  //parseInt(this.float_number)注意这个this,指的就是vm;
          }
        },
        filters: {    //filters属性关键字,filters  是属性属性名不能改   过滤器不过是一个方法, filter在2.0版本以后不再允许在directive里使用
          toInt: function (value) {
            return parseInt(value);
          }
        }  //计算属性可以根据data属性源的变化自动缓存,而methods里面的方法是每次都会运行一次,filters也是,
})
</script>
</html>
 
时间: 09-18

计算属性 computed:的相关文章

Vue.js 基础学习计算属性computed

我们要写一个成绩表如下 数学 90 物理 80 英语 70 <div id="app"> <table border="1"> <tr> <td>数学</td> <td>{{ math }}</td> </tr> <tr> <td>物理</td> <td>{{ physics }}</td> </tr>

vue2.0中的watch和计算属性computed

watch和computed均可以监控程序员想要监控的对象,当这些对象发生改变之后,可以触发回调函数做一些逻辑处理 watch监控自身属性变化 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></

怎样理解 Vue 中的计算属性 computed 和 methods ?

需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实并不好. 最理想的情况是: html 只负责展示, 绑定的数据都是 赤裸裸 的 变量, 而非 表达式 , 这样就会比较人性化. 想要达到这种效果可以有两种方法: computed 和 methods. 1. 使用 methods 相当于是为这个 字符串倒序 的功能单独写了一个函数, 这个函数在 Vu

计算属性computed与methods

计算属性computed与methods的区别:首先是使用methods如果执行了一个函数.那么它里面的全部函数都会执行.但是使用计算属性就不一样,它只是单对单的执行,不会去执行你不要执行的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

VueJS计算属性: computed

computed属性 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </h

vue.js的计算属性computed

对于计算属性里关联的对象,即使对象不是组件作用域内的,当对象在外部改变了某个属性,同样会发出计算属性的方法. computed:{ noCheckeLength:function(){ return this.list.filter(function(item){ return !item.isChecked }).length } }, item.isChecked是input{type="checkbox"}的value值,当在页面点击勾选或者去掉勾选,则item.isChecke

vue2计算属性computed

详见vue2.0 API<计算属性> 需求: 模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这种情况下,模板不再简单和清晰.在意识到这是反向显示 message 之前,你不得不再次确认第二遍.当你想要在模板中多次反向显示 message 的时候,

uni-app 计算属性 computed

功能:=>大于1000用kg表示 小于1000,用g表示 计算属性 计算属性必须是有一个返回值的哦 在html写被计算的值 在computed中去直接调用哈 <view> <text>{{jisuweight}}</text> </view> data() { return { weight:1110, } }, computed:{ jisuweight(){ return this.weight>1000 ? (this.weight/100

vue9 计算属性 computed

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社--http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, ma