//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<div v-bind:class="{bottle:!flag,change:flag}"></div>
<!-- 是冒号冒号冒号!!!!不是等于号!!!!-->
<div id="bor">
<div v-bind:style="{ width : length +'%'}"></div>
</div>
<div id="but">
<button v-on:click="hit" v-show="!flag">hit</button>
<button v-on:click="res">restart</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
//style.css
.bottle
{
background-image:url(1.png);
background-repeat:no-repeat;
margin:0 auto;
width:200px;
height:500px;
}
.change
{
background-image:url(2.png);
background-repeat:no-repeat;
margin:0 auto;
width:200px;
height:500px;
}
#bor
{
border:solid 1px black;
width:180px;
margin:20px auto;
}
#bor div
{
height:20px;
background-color:red;
}
#but
{
width:100px;
margin:0 auto;
}
//app.js
new Vue({
el:"#vue-app",
data:
{
length:100,
flag:false
},
methods:
{
res:function()
{
this.length=100;
this.flag=false;
},
hit:function()
{
this.length-=10;
if(this.length<=0)this.flag=true;
}
}
});
1.css中div的内嵌表达
<!--这样写可以少一些变量id名-->
<!--这里一个是边框,一个是里面的进度条,两个不是同一样东西 -->
2.两个图片的样式转化,这个在第十节提到过了,!!!记得是冒号,不是等于号{{属性:值(真/假)}}
这个是样式,如果是值,还是等于号
3.两个button执行的函数不同,在js文件中,data里面的属性用在methods的函数里面时,都要加this.
4.进度条的变化,和它的颜色框进行绑定一下,并且赋予其百分比,然后每次减10%,width : length +'%'注意这里也是冒号,不是等于号。另外button添加了v-show,是为了可以让进度条为0时,不再显示hit这个按钮。
PS:由于浏览器不兼容问题,并没有采用教程的代码