账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    Vue计算属性问题:好像 img.src 属性的变化都不会影响到属性的计算
    26
    0
    <html>
    <head>
    </head>
    <body>
    <div id="app">
        <img :src="imgsrc"/>
    </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
    var vm = new Vue({
        el : '#app',
        data : {
            img : {}
        },
        created : function(){
            var that = this;
            setTimeout(function(){
                that.img.src = 100;
            },1000);
        },
        computed : {
            imgsrc : function(){
                return this.img.src == null ? 'www.baidu.com' : 'www' + this.img.src;
            }
        }
    });
    </script>
    </html>

    如上图直接源码,目前的场景和上述非常类似,后台传回的img src的 前后两段 url 需要拼接,如果没有 后段 认为没有图片,给出一个默认的图片url。现在的问题在于不管是直接 :src 还是 计算属性,好像 img.src 属性的变化都不会影响到属性的计算,求解,谢谢!

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 痛苦在呻吟 普通会员 1楼

      在 Vue 中,计算属性是用来处理数据的一种方法,它将数据的当前值与默认值进行比较,然后返回新的值。然而,如果属性的值是一个数组,而不是一个字符串,那么这个计算属性的值实际上会改变,因此它将会影响到计算属性的值。

      例如,假设你有一个计算属性 called imageSrc,它的值是一个数组,如下所示:

      js export default { data() { return { imageSrc: ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'] } } }

      然后,你可以使用这个计算属性来处理用户的图片URL:

      js this.$emit('change-image-url', this.imageSrc[0]);

      在这个例子中,当你点击按钮时,会触发一个 change-image-url 的事件,这个事件会将 imageSrc 的第一个元素的值赋给 this.imageSrc[0],这样 this.imageSrc 的值就会改变,因此计算属性的值也会改变。

      如果你使用的是字符串作为计算属性的值,那么这个计算属性的值就不会改变,因此它将不会影响到计算属性的值。例如:

      js export default { data() { return { imageSrc: 'https://example.com/image1.jpg' } } }

      在这个例子中,imageSrc 的值是一个字符串,它不会改变,因此计算属性的值也不会改变。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部