vue2中的style部分如何动态绑定数据?

nfer
  • 320
<template>
  <div class="test">
  </div>
</template>

<script>

export default {
  data() {
    return {
      test1: 'testurl1',
      test2: 'testurl2',
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.test {
    background-image: url({{test1}})
}

@media only screen and (max-width: 1068px) {
    .test {
        background-image: url({{test2}})
    }
}
</style>

如何动态根据data中的数据(实际场景是通过数据库获取)来自动更新background-image
因为这里涉及到了css的媒体查询,所以直接写到inline style的方式不太好。
不知道大家怎么解决这个问题,多谢各位

回复
阅读 10.1k
2 个回答

可以通过绑定 data 的方式实现。

在线演示Demo : http://jsfiddle.net/50wL7mdz/...

<div id="app" :style="styleObject"></div>

<script>
export default {
  data() {
    return {
      styleObject: {
          backgroundImage: 'url(https://www.baidu.com/img/bd_logo1.png)',
          width: '400px',
          height: '400px',
        }
    };
  },
};
</script>

vue的作用域怎么可能跑到css里面呢.
用computed

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏