精华内容
下载资源
问答
  • 计算属性</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 1.基本用法 --> <h2&...
  • Vue计算属性

    2020-09-15 00:31:52
    Vue计算属性 {{ i++ }} 我们都知道{{}}在vue中可以做计算,引入计算属性的原因就是解决{{}}不能做逻辑复杂运算的原因。 <div> <p>{{computemsg}}</p> </div> computed:{ computedmsg:...

    Vue计算属性

    	{{ i++ }}
    

    我们都知道{{}}在vue中可以做计算,引入计算属性的原因就是解决{{}}不能做逻辑复杂运算的原因。

    <div>
    	<p>{{computemsg}}</p>
    </div>
    
    computed:{
    	computedmsg:function() {
    		//运算
    		return 结果
    	}
    }
    

    计算属性也有get和set方法

    展开全文
  • VUE计算属性

    2020-03-09 19:43:05
    VUE计算属性(可以写一个函数来讲计算值) 本案例为计算总分和平均分 计算属性:computed:{ } 和 data、methods 同级 HTML页面 ↓ <!DOCTYPE html> <html lang="en"> <head> <meta charset=...

    VUE计算属性(可以写一个函数来讲计算值)

    本案例为计算总分和平均分

    计算属性:computed:{ } 和 data、methods 同级

    HTML页面 ↓
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>VUE计算属性</title>
    
    </head>
    
    <body>
        <div id="app">
            <table border="1">
                <thead>
                    <th>学科</th>
                    <th>分数</th>
                </thead>
                <tbody>
                    <tr>
                        <td>语文</td>
                        // v-model.number 把双向绑定的model的值转换为数字型
                        <td><input type="text" v-model.number="yw"></td>
                        <td>{{yw}}</td>
                    </tr>
                    <tr>
                        <td>数学</td>
                        <td><input type="text" v-model.number="sx"></td>
                        <td>{{sx}}</td>
                    </tr>
                    <tr>
                        <td>英语</td>
                        <td><input type="text" v-model.number="yv"></td>
                        <td>{{yv}}</td>
                    </tr>
                    <tr>
                        <td>总分</td>
                        <td>{{sum}}</td>
                    </tr>
                    <tr>
                        <td>平均分</td>
                        <td>{{average}}</td>
    
                    </tr>
                </tbody>
            </table>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
        <script src="index.js"></script>
    </body>
    
    </html>
    
    JS页面 ↓
    var app = new Vue({
        el: '#app',
        data: {
            //分数
            yw: 90,
            sx: 80,
            yv: 70
        },
        computed: {
            //求和值
            sum: function () {
                return this.yw + this.sx + this.yv
            },
            //求平均分
            average: function () {
                return Math.round(this.sum / 3)
            }
        }
    })
    
    展开全文
  • vue计算属性

    2019-05-19 09:15:11
    vue计算属性详解——小白速会 一、什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: {{ message.split('').reverse().join(''...

    vue计算属性详解——小白速会
    一、什么是计算属性

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:

    {{ message.split('').reverse().join('') }}
    这里的表达式包含3个操作,并不是很清晰,所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理。

    二、计算属性的用法

    在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果就可以。

    我们把上面的例子用计算属性的方式重写一下

    Original message: "{{ message }}"

    Computed reversed message: "{{ reversedMessage }}"

      //我们把复杂处理放在了计算属性里面了
    复制代码 var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } }); 复制代码 结果:

    Original message: “Hello”

    Computed reversed message: “olleH”

    除了上例简单的用法,计算属性还可以依赖多个Vue 实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新。

    计算属性还有两个很实用的小技巧容易被忽略:一是计算属性可以依赖其他计算属性; 二是计算属性不仅可以依赖当前Vue 实例的数据,还可以依赖其他实例的数据,例如:

    <div id="app1"></div>
    <div id="app2">{{ reverseText}}</div>
    

    复制代码
    var app1 = new Vue({
    el: ‘#app1’,
    data: {
    text: ‘computed’
    }
    });

    var app2 = new Vue({
    el: ‘#app2’,
    computed: {
    reverseText: function(){
    return app1.text.split(’’).reverse().join(’’); //使用app1的数据进行计算
    }
    }
    });
    复制代码

    每一个计算属性都包含一个getter 和一个setter ,我们上面的两个示例都是计算属性的默认用法, 只是利用了getter 来读取。

    在你需要时,也可以提供一个setter 函数, 当手动修改计算属性的值就像修改一个普通数据那样时,就会触发setter 函数,执行一些自定义的操作,例如:

    复制代码
    var vm = new Vue({
    el: ‘#demo’,
    data: {
    firstName: ‘Foo’,
    lastName: ‘Bar’
    },
    computed: {
    fullName: {
    // getter
    get: function () {
    return this.firstName + ’ ’ + this.lastName
    },
    // setter
    set: function (newValue) {
    var names = newValue.split(’ ');
    this.firstName = names[0];
    this.lastName = names[names.length - 1];
    }
    }
    }
    });
    //现在再运行 vm.fullName = ‘John Doe’ 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。
    复制代码
    绝大多数情况下,我们只会用默认的getter 方法来读取一个计算属性,在业务中很少用到setter,所以在声明一个计算属性时,可以直接使用默认的写法,不必将getter 和setter 都声明。

    三、计算属性缓存

    上面的例子,除了使用计算属性外,我们也可以通过在表达式中调用方法来达到同样的效果,如:

    {{reverseTitle()}}
    // 在组件中 methods: { reverseTitle: function () { return this.title.split('').reverse().join('') } } 我们可以将同一函数定义为一个方法而不是一个计算属性,两种方式的最终结果确实是完全相同的。只是一个使用reverseTitle()取值,一个使用reverseTitle取值。

    然而,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。

    这就意味着只要 title还没有发生改变,多次访问 reverseTitle计算属性会立即返回之前的计算结果,而不必再次执行函数。

    举个小例子:

        <div>{{reverseTitle}}</div>
        <div>{{reverseTitle1()}}</div>
        <button @click="add()">补充货物1</button>
        <div>总价为:{{price}}</div>
    

    复制代码
    computed: {
    reverseTitle: function(){
    return this.title.split(’’).reverse().join(’’)  //而使用计算属性,只要title没变,页面渲染是不会重新进这里来计算的,而是使用了缓存。
    },
    price: function(){
    return this.package1.countthis.package1.price+this.package2.countthis.package2.price
    }
    },
    methods: { //对象的方法
    add: function(){
    this.package1.count++
    },
    reverseTitle1: function(){
    return this.title.split(’’).reverse().join(’’)  //点击补充货物,也会进这个方法,再次计算。不是刷新,而是只要页面渲染,就会进方法里重新计算。
    }
    },
    复制代码
    相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。

    我们为什么需要缓存?假设我们有一个性能开销比较大的的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。

    如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。

    展开全文
  • Vue 计算属性

    2019-05-12 17:14:47
    Vue 计算属性(computed) 简单实现利用计算属性的方法实现点击切换音频 <div id="app"> <audio :src="getCurrentSrc" autoplay controls></audio> <ul> <li v-for="(item,index) ...

    Vue 计算属性(computed)

    简单实现利用计算属性的方法实现点击切换音频

    	<div id="app">  
            <audio :src="getCurrentSrc" autoplay controls></audio>
            <ul>
                <li v-for="(item,index) in musicList" @click="clickHandler(index)">
                    <h2>{{item.id}}、 歌名:{{item.name}}</h2>
                </li>
            </ul>
        </div>
    
    	var musicList=[
                {id:1, name:'one',src:'./mp3/5c88d11f4d75753254.mp3'},
                {id:2, name:'two',src:'./mp3/5c88d12060a8716512.mp3'},
                {id:3, name:'three',src:'./mp3/5c892b612ab8918603.mp3'},
                {id:4, name:'four',src:'./mp3/5c8948aa510b887278.mp3'},
                {id:5, name:'five',src:'./mp3/5c89189c4f4cf81405.mp3'},
            ]
        new Vue({
            el:"#app",
            data() {
                return {
                    musicList:musicList,
                    currentIndex:0,
                }
            },
            methods: {
                clickHandler(index){
                    this.currentIndex = index;
                }
            },
            computed: {
                // 计算属性默认只有getter
                getCurrentSrc(){
                    return this.musicList[this.currentIndex].src;
                }
            },
    
        })
    
    展开全文
  • vue 计算属性

    2019-02-27 14:07:08
    计算属性 基本用法 1.计算属性的特点 1、可以对属性数据进行逻辑处理操作 2、对计算属性中的数据进行...如果此时msg被修改为:my name is vue, 那此时计算属性会监视原来的数据被更改,会重新计算结果为:vue is n...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,279
精华内容 3,711
关键字:

vue计算属性

vue 订阅