The top three future star votes:
Show results:
html part:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.top {
display: flex;
justify-content: center;
}
.top>div {
margin-left: 30px;
text-align: center;
}
.top>div>span {
color: goldenrod;
font-size: large;
}
/* The first and third child elements move down 30 */
.top>div:nth-child(1),
.top>div:nth-child(3) {
margin-top: 30px;
}
img {
width: 120px;
height: 150px;
border-radius: 10px;
}
img:hover {
box-shadow: 5px 5px 5px rebeccapurple;
transform: translate(5px, 5px);
}
/* body part layout */
.main {
display: flex;
justify-content: space-around;
/* automatic line break */
flex-wrap: wrap;
}
.main>div {
text-align: center;
margin-left: 30px;
margin-top: 20px;
}
.main button {
width: 90px;
height: 40px;
border-radius: 10px;
border: none;
background-color: #6cf;
font-size: large;
color: aliceblue;
}
button:hover {
box-shadow: 0 8px 5px rgb(123, 64, 182);
}
button:active {
transform: translateY(5px);
box-shadow: 0 3px 5px rgb(123, 64, 182);
}
</style>
</head>
<body>
<h1 style="text-align: center;color: blue;">Top three future stars</h1>
<div id="top" class="top">
<div>
<img src="imgs/a.webp" alt=""><br>
<span>No. 2</span><br>
Zhang San--90
</div>
<div>
<img src="imgs/b.webp" alt=""><br>
<span>No. 1</span><br>
Li Si--100
</div>
<div>
<img src="imgs/c.jpeg" alt=""><br>
<span>Exploring flowers</span><br>
Wang Wu--80
</div>
</div>
<hr>
<div class="main" id="main">
<div>
<img src="imgs/a.webp" alt=""><br>
<span>a--0</span><br><br>
<button>投票</button>
</div>
</div>
</body>
script part:
<script>
let beauty = [
{ name: 'a.webp', num: 0 }, { name: 'b.webp', num: 0 }, { name: 'c.jpeg', num: 0 },
{ name: 'd.webp', num: 0 }, { name: 'e.webp', num: 0 }, { name: 'f.webp', num: 0 },
{ name: 'g.webp', num: 0 }, { name: 'h.webp', num: 0 }, { name: 'i.webp', num: 0 },
{ name: 'j.webp', num: 0 }, { name: 'k.webp', num: 0 }, { name: 'l.webp', num: 0 },
]
//According to the data in the array, automatically generate pictures to the page
let main = document.getElementById('main')
function flushImg() {
let s = ''
beauty.forEach((e, i) => {
s += `<div>
<img src="imgs/${e.name}" alt=""><br>
<span>${e.name.slice(0,e.name.indexOf('.'))}--${e.num}</span><br><br>
<button οnclick="vote(${i})">投票</button>
</div>`
})
main.innerHTML = s
}
// call flushImg
flushImg()
//voting function
function vote(i){
beauty[i].num++
// Refresh the body (data in the array)
flushImg()
//Update the top three
updateTop3()
}
let tops=document.getElementById('top')
//Update the top three
function updateTop3(){
//Cannot sort the original array, copy the original array for sorting
let beauty2=[...beauty]
beauty2=beauty2.sort((e1,e2)=>{
//flashback
return e2.num-e1.num
})
//Get the first three objects of the data
beauty2=beauty2.slice(0,3)
tops.innerHTML=
` <div>
<img src="imgs/${beauty2[1].name}" alt=""><br>
<span>No. 2</span><br>
${beauty2[1].name.slice(0,beauty2[1].name.indexOf('.'))}--${beauty2[1].num}
</div>
<div>
<img src="imgs/${beauty2[0].name}" alt=""><br>
<span>No. 1</span><br>
${beauty2[0].name.slice(0,beauty2[0].name.indexOf('.'))}--${beauty2[0].num}
</div>
<div>
<img src="imgs/${beauty2[2].name}" alt=""><br>
<span>Exploring flowers</span><br>
${beauty2[2].name.slice(0,beauty2[2].name.indexOf('.'))}--${beauty2[2].num}
</div>`
}
</script>
Getting started with vue:
1. Import js
2、
Interpolation expression { {}}, read the data in data in vue, and apply it to the text range
v-for tag attribute, used to loop through the array, e in arr
e is each element in the array arr
v-bind: value one-way binds an attribute, allowing the attribute to read the data in data, usually abbreviated as:
v-model:value two-way binding, can read or change the data in data,
Usually abbreviated as v-model, just applied to form item input
3. Vue instance (single and bidirectional binding)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- import vue.js -->
<script src="vue.min.js"> </script>
</head>
<body>
<!--
Interpolation expression { {}}, read the data in data in vue, and apply it to the text range
v-for tag attribute, used to loop through the array, e in arr
e is each element in the array arr
v-bind: value one-way binds an attribute, allowing the attribute to read the data in data, usually abbreviated as:
v-model:value two-way binding, can read or change the data in data,
Usually abbreviated as v-model, just applied to form item input
-->
<div id="app">
<p>Hi everyone, I am { {person.name}} and I am { {person.age}} years old</p>
<p>
The branch offices in Houpu are:
<ul>
<li v-for="(hp,i) in hpList">
{ {hp}}--{ {i}}
</li>
</ul>
Ordinary loop:
<ul>
<li v-for="i in 10">
{ {i}}
</li>
</ul>
</p>
<h3>One-way binding</h3>
<input type="text" name="" id="" v-bind:value="person.name " placeholder="请输入姓名">
<input type="text" name="" id="" :value="person.age " placeholder="请输入姓名">
<h3>Two-way binding</h3>
<input type="text" name="" id="" v-model:value="person.name " placeholder="请输入姓名">
<input type="text" name="" id="" v-model="person.age " placeholder="Please enter name">
</div>
</body>
<script>
//Create a vue instance
new View({
the:'#app',
data:{
person:{name:'Cao Cao',age:36},
hpList:['Wuhan','Hunan','Henan','Shaanxi']
}
})
</script>
</html>
Vue form case:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" cellpadding="20">
<tr>
<th>serial number</th>
<th>Name</th>
<th>age</th>
<th>Operation|<button @click="addHero">Add</button></th>
</tr>
<tr v-for="hero in heroList">
<td>{ {hero.id}}</td>
<td>{ {hero.name}}</td>
<td>{ {hero.age}}</td>
<td><button @click="deleteHero(hero.id)">删除</button> | <button>修改</button></td>
</tr>
</table>
<div v-show="isInputShow">
<h3>Add new hero</h3>
<input type="text" v-model="hero.id" placeholder="Please enter the serial number"><br><br>
<input type="text" v-model="hero.name" placeholder="Please enter name"><br><br>
<input type="num" v-model="hero.age" placeholder="Please enter age"><br><br>
<input type="submit" @click="insertHero"><br><br>
</div>
</div>
</body>
<script>
new View({
the:'#app',
data:{
//control form hide and show
isInputShow:false,
//Two-way binding to achieve form data acquisition
hero:{
id:'',
name:'',
age:''
},
heroList:[
{id:1,name:'Cao Cao',age:36},
{id:2,name:'Liu Bei',age:32},
{id:3,name:'Sun Quan',age:28},
]
},
methods:{
deleteHero(id){
// alert(id)
this.heroList=this.heroList.filter((e,i)=>{
return e.id!=id
})
},
addHero() {
this.isInputShow=!this.isInputShow
},
insertHero(){
// console.log(this.hero)
this.heroList.push(this.hero)
}
}
})
</script>
</html>
Effect display diagram:
