vue.js入门（13）实战demo

//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/[email protected]/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的内嵌表达

2.两个图片的样式转化，这个在第十节提到过了，！！！记得是冒号，不是等于号{{属性：值（真/假）}}

这个是样式，如果是值，还是等于号

3.两个button执行的函数不同，在js文件中，data里面的属性用在methods的函数里面时，都要加this.

4.进度条的变化，和它的颜色框进行绑定一下，并且赋予其百分比，然后每次减10%，width : length +'%'注意这里也是冒号，不是等于号。另外button添加了v-show，是为了可以让进度条为0时，不再显示hit这个按钮。

PS：由于浏览器不兼容问题，并没有采用教程的代码

vue.js入门（13）实战demo

猜你喜欢