//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：由于浏览器不兼容问题，并没有采用教程的代码
