[英]Dynamically Edit Inline CSS with VueJS
如何使用VueJS更改标签的属性? 我正在尝试制作一个页面背景的应用程序,该应用程序每次从后端获取数据时都会改变。 我曾尝试使用v-bind:style
和v-style
但都以“破坏” Vue结尾。 有没有办法像在原生JS中编写可以更改DOM的方法一样? 我还尝试实现document.getElementbyId
等等,但是它也破坏了VueJS。
换句话说,我该如何做背景图片:{{pic_url}};
抱歉,无法在手机上进行格式化。
我遇到了一些麻烦,因为内联样式周围有引号,然后在'url("")'
还有两组引号。 当我将样式对象放入其自己的对象中时,我可以使用它:
https://jsfiddle.net/ahwLc3rq/
html
<div id="app">
<div id="test" :style="backgroundStyle"></div>
</div>
js
new Vue({
el:'#app',
data:function(){
return {
pic_url: 'https://anchormetrics.com/wp-content/themes/bootstrap-basic-child/images/amlogo.png'
}
},
computed:{
backgroundStyle:function(){
return {
'background-image':'url("'+this.pic_url+'")'
}
}
},
methods:{
fetchPic:function(){
this.$http.get('/path/to/api').then(function(response){
this.pic_url = response;
}.bind(this))
}
},
ready:function(){
this.fetchPic();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.