1、走馬燈
<body>
<div id='app'>
<button @click="start">浪起來</button>
<button @click="stop">低調</button>
<h3>{{title}}</h3>
</div>
</body>
<script>
const vm = new Vue({
el:"#app",
data:{
title:"不要浪，別團",
Interva: null
},
methods: {
start(){
clearInterval(this.Interva)
console.log(this.title.substr(0,1));
console.log(this.title.substring(0, 1));
this.Interva = setInterval(()=>{
this.title = this.title.substr(1) + this.title.substring(0,1);
},300)
},
stop(){
clearInterval(this.Interva);
}
}
})
</script>
2、簡單計算器
<body>
<div id="app">
<input type="text" v-model='num1'>
<select v-model='opration'>
<option value="+">+</option>
<option value="-" selected>-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="num2">
<button @click="calc">=</button>
<span style="background-color: aqua;">{{sum}}</span>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
num1: 0,
opration: "-",
num2: 0,
sum: 0
},
methods: {
calc() {
this.num1 = Number(this.num1);
switch (this.opration) {
case "+":
this.sum = this.num1 + this.num2;
break;
case "-":
this.sum = this.num1 - this.num2;
break;
case "*":
this.sum = this.num1 * this.num2;
break;
case "/":
this.sum = this.num1 / this.num2;
break;
}
}
}
})
</script>
3、循環渲染下列數據，展示數據的名字。點擊這--行能夠alert出數據的名字。頂部有搜索框，后面有個搜索按鈕
點擊搜索按鈕可以按照輸入的內容檢索列表。
<div id="app">
{{title}}
<ul>
<!-- i為索引 item為內容 -->
<input type="text" v-model="item1">
<button @click="search">檢索</button>
<li v-for="(item,i) in list" @click="show(item.name)" v-show="flag">id：{{item.id}} ----值：{{item.name}}</li>
</ul>
<ul>
<li v-for="(item,i) in list1">id：{{item.id}} ----值：{{item.name}} </li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: "#app",
data: {
list: [{ id: 3, name: "張三豐" },
{ id: 5, name: "張無忌" },
{ id: 13, name: "楊逍" },
{ id: 33, name: "殷天正" },
{ id: 12, name: "趙敏" },
{ id: 97, name: "周芷若" }],
list1: [],
item1: null,
flag:true
},
methods: {
show(name) {
alert(name);
},
search() {
this.list1 = this.list.filter(item => {
return item.name == this.item1;
})
if(this.list1.length==0){
this.flag = true;
}else{
this.flag = false;
}
}
}
})
</script>