v-if 、v-for、input条件判断事件处理
【一】条件与判断
【1】v-if v-else-if v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<h1>条件判断</h1>
<h2>分数是：{{score}}</h2>
<h3 v-if="score>=90&&score<=100">优秀</h3>
<h3 v-else-if="score>=80&&score<90">良好</h3>
<h3 v-else-if="score>=60&&score<80">及格</h3>
<h3 v-else>不及格</h3>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
score: 99
}
})
</script>
</html>
【二】列表渲染
【1】v-if+v-for+v-else控制购物车商品的显示
- v-for="(item,index) in good_list" :class="index%2==0?'table-primary':'table-dark'"
- 使用了三目运算符改变表格的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
</style>
</head>
<body>
<div id="app">
<div class="row justify-content-center">
<div class="col-6">
<table class="table">
<thead>
<tr>
<th scope="col">商品ID</th>
<th scope="col">名字</th>
<th scope="col">价格</th>
<th scope="col">数量</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in good_list" :class="index%2==0?'table-primary':'table-dark'">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
good_list: [
{id: 1, name: '手机', price: 1000, count: 1},
{id: 2, name: '书包', price: 2000, count: 2},
{id: 3, name: '电脑', price: 3000, count: 3},
{id: 4, name: '洗衣机', price: 4000, count: 4},
],
}
})
</script>
</html>
- 点击按钮加载购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
</style>
</head>
<body>
<div id="app">
<div class="row justify-content-center">
<div class="col-6">
<div class="text-center">
<button class="btn btn-danger " @click="handleLoad">加载购物车</button>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">商品ID</th>
<th scope="col">名字</th>
<th scope="col">价格</th>
<th scope="col">数量</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in good_list" :class="index%2==0?'table-primary':'table-dark'">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
good_list:[]
},
methods:{
handleLoad(){
this.good_list=[
{id: 1, name: '手机', price: 1000, count: 1},
{id: 2, name: '书包', price: 2000, count: 2},
{id: 3, name: '电脑', price: 3000, count: 3},
{id: 4, name: '洗衣机', price: 4000, count: 4},
]
}
}
})
</script>
</html>
【三】v-for遍历数组(列表)、对象(字典)、数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<h1>循环数字0-9</h1>
<p v-for="(item,index) in num">{{index}}</p>
<hr>
<h1>循环数组</h1>
<span v-for="(item,index) in hobby">{{item}} <span v-if="index!=hobby.length-1">|</span></span>
<hr>
<h1>循环对象</h1>
<p v-for="(key,value) in userinfo" :key="key">{{key}}:{{value}}</p>
<hr>
<h1>循环字符串</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
num:10,
hobby:['唱歌','跳舞'],
userinfo:{name:'小芳',age:19,height:165}
},
methods: {}
})
</script>
</html>
注意！在Vue中：
-
数组的
index和value是反的 -
对象的
key和value也是反的 -
key值 的解释
vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）
- 在
v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一 - 页面更新之后，会加速DOM的替换（渲染）
:key="变量"
- 在
【四】书籍的双向绑定
【1】v-model的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model="myText" placeholder="请输入内容">
<h1>数据双向绑定</h1>
<input type="text" v-model:value="name">
您输入的内容是：{{myText}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
myText: '',
name:'hope'
},
})
</script>
</html>
【五】事件处理
【1】input 标签的事件处理
- input 当输入框进行输入的时候 触发的事件
- change 当元素的值发生改变时 触发的事件
- blur 当输入框失去焦点的时候 触发的事件
- focus 当获得焦点的时候 触发的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue/vue.js"></script>
</head>
<body>
<div id="app">
<h1>input事件</h1>
<input type="text" v-model="name1" @input="handleInput">-->{{name1}}
<h1>change事件</h1>
<input type="text" v-model="name2" @change="handleChange">-->{{name2}}
<h1>blur事件</h1>
<input type="text" v-model="name3" @blur="handleBlur">-->{{name3}}
<h1>focus事件</h1>
<input type="text" v-model="name4" @focus="handleFocus">-->{{name4}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name1:'',
name2:'',
name3:'',
name4:'asdfasd',
},
methods:{
handleInput(event){
console.log(event.data)
},
handleChange(){
console.log('handleChange')
},
handleBlur(){
console.log('handleBlur')
},
handleFocus(){
console.log('Focus')
this.name4=''
}
}
})
</script>
</html>
【2】过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<h1>过滤</h1>
<input type="text" v-model="myText" @input="handleInput" placeholder="请输入要筛选的内容">
<hr>
<ul>
<li v-for="item in newdataList">{{item}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
myText:'',
dataList:['a','ba','acc','be','beyond','cc','car','cartoon'],
newdataList:['a','ba','acc','be','beyond','cc','car','cartoon'],
},
methods: {
handleInput(event){
var _this=this
this.newdataList=this.dataList.filter(function (item){
// if(item.indexOf(_this.myText)>=0){
// return true
// }else {
// return false
// }
return item.indexOf(_this.myText)>=0
})
}
}
})
</script>
</html>
浙公网安备 33010602011771号