vue动态改变背景图片demo分享
如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<style>
#bag{
width: 200px;
height: 500px;
margin: 0 auto;
background: url(img/piao11.jpg) center no-repeat;
background-size: 80%;
}
.burst{
background-image: url(img/piao12.jpg) !important;
background-size: 80%;
}
#bag-health{
width: 200px;
border: 2px solid #000000;
margin: 0 auto 20px auto;
}
#bag-health div{
height: 20px;
background: crimson;
}
#controls{
width: 200px;
margin: 0 auto;
}
#controls button{
margin-left: 23px;
}
</style>
</head>
<body>
<div id="app">
<!--当前图片-->
<div id="bag" :class='{burst:ended}'></div>
<!--进度情况-->
<div id="bag-health">
<div :style="{width:health + '%'}"></div>
</div>
<!--控制按钮-->
<div id="controls">
<button @click='punch' v-show='!ended'>使劲敲</button>
<button @click='restart'>重新开始</button>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
health:100,
ended:false
},
methods:{
punch:function(){
this.health -= 10;
if (this.health<=0) {
this.ended = true
}
},
restart:function(){
this.health = 100;
this.ended = false
}
},
computed:{
}
})
</script>
</body>
</html>
以上这篇vue动态改变背景图片demo分享就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
问题内容： 在html模板中，我具有带有动态图像的这种样式： 可以在网络浏览器和android浏览器中使用。但是，使用“ style =”动态显示的背景图像不会在iPad上显示。 我总是可以使用img标签创建动态图像，但是我正在寻找iPad的样式/ css解决方案。 问题答案： 改用 要么
-
问题内容： 应该是一个相当简单的问题。在我的网站上，我这样做： 我想做的是使背景图像变暗。由于我在该DIV中包含UI元素，因此我认为我真的不能在其上放置另一个div来使其变暗。有什么建议吗？ 问题答案： 您可以将CSS3 LinearGradient属性与背景图像一起使用，如下所示： 这是一个演示：
-
问题内容： 我为设置背景图片有一个小问题。 这是我在网站上获得的html： 这是CSS： 我不知道为什么按钮的背景仍然是白色。 问题答案： 令人惊讶的是，这里没有答案解决或提及实际问题。 该CSS选择器说：“给我一个元素与ID 里面 一个元素”，就像这样： 但是，您想要的是 带有* id 的元素。而选择器将是（请注意 button 和 #rock 之间缺少的空间）。 * 正如@Greg已经提到的：
-
我正在使用RangeSeekBar为3种情况设置一些值（即绿色=OK，琥珀色=警告，红色=撤离）...我正在使用xml绘图来设置背景 我知道我可以通过编程更改渐变，但如何缩小起始颜色并增加结束颜色？有人能解决这个问题吗？ 谢谢
-
公共视图onCreateView（LayoutInflater inflater、ViewGroup容器、Bundle savedInstanceState）{ 但是它崩溃了，错误日志如下所示： 是 我已经在中为添加了init，如下所示： 我的场景是： Activity1-->Activity1-->片段 Splash的XML如下所示： 我有两项活动。片段由activity2调用，我想改变Acti
-
问题内容： 我正在创建一个GUI，尽管很简单，但我想让背景图像（2048 X 2048）填满整个窗口，并在左上角放置一个正方形，可以偶尔加载64 X 64图像。在此先感谢提供帮助的任何人:)编辑：我已经知道如何使JFrame设置大小，其图像加载需要帮助。 问题答案： 这是一个在JFrame中添加背景图像的简单示例： 点击这里了解更多信息