Vue（二）
本地应用
v-if
根据表达式真假，切换元素的显示和隐藏（操纵dom元素）
<body>
<div id="app">
<input type="button" value="切换显示" @click="toggleIsShow">
<p v-if="isShow">Xherlock</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data: {
isShow: false
},
methods: {
toggleIsShow:function(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>- v-if指令作用是：根据表达式的真假切换元素的显示状态
- 本质是通过操纵dom元素来切换显示状态
- 表达式的值为true，元素存在于dom树中；为false，从dom树中移除
- 频繁的切换v-show，反之使用v-if，前者的切换消耗少
v-bind
设置元素的属性（eg：src、title、class）
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="">
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data: {
imgSrc: "./1.jpg",
imgTitle: "Xherlock",
isActive: false
},
methods: {
toggleActive:function(){
this.isActive = !this.isActive;
}
}
})
</script>
</body>
- v-bind指令的作用是：为元素绑定属性
- 完整写法v-bind:属性名
- 简写可省略v-bind
- 需要动态的增删class建议使用对象的方式
图片切换
简单轮播效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue</title>
<style>
.center {
text-align: center;
border: 5px solid blue;
}
.op{
height: 500px;
}
.left{
float: left;
margin-top: 150px;
}
.right{
float: right;
margin-top: 150px;
}
</style>
</head>
<body>
<div id="app">
<div class="center">
<h2>Xherlock</h2>
<a href="javascript:void(0)" v-show="index!=0" class="left" @click="prev">
<img src="./images/prev.png" alt="">
</a>
<img :src="imgArr[index]" alt="" class="op">
<a href="javascript:void(0)" v-show="index!=9" class="right" @click="next">
<img src="./images/next.png" alt="">
</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data: {
imgArr:[
"./images/1.jpg",
"./images/2.jpg",
"./images/3.jpg",
"./images/4.jpg",
"./images/5.jpg",
"./images/6.jpg",
"./images/7.jpg",
"./images/8.jpg",
"./images/9.jpg",
"./images/10.jpg"
],
index:0
},
methods: {
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
}
})
</script>
</body>
</html>
v-for
根据数据生成列表结构
<body>
<div id="app">
<input type="button" value="添加数据" @click="add">
<input type="button" value="删除数据" @click="remove">
<ul>
<li v-for="(item,index) in arr">
{{ index+1 }} : Xherlock~{{item}}
</li>
</ul>
<p v-for="item in city" v-bind:title="item.name">
{{ item.name }}
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data: {
arr:["a","b","c","d","e"],
city:[
{name:"Beijing"},
{name:"Chengdu"},
{name:"Zhengzhou"}
]
},
methods: {
add:function(){
this.city.push({name:"Shanghai"});
},
remove:function(){
this.city.shift();
}
}
})
</script>
</body>
- v-for指令的作用是：根据数据生成列表
- 数组经常和v-for结合使用
- 语法(item,index) in 数据
- item和index可以结合其他指令一起使用
v-on补充
传递自定义参数，事件修饰符
<body>
<div id="app">
<input type="button" value="求和" @click="show(1,2)">
<input type="text" @keyup.enter="sayHi">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data: {
},
methods: {
show:function(p1,p2){
alert(p1+p2);
},
sayHi:function(){
alert("Hi");
}
}
})
</script>
</body>v-model
获取和设置表单元素的值（双向数据绑定）
<body>
<div id="app">
<input type="button" value="修改值" @click="setM">
<input type="text" v-model="message" @keyup.enter="getM">
<p>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data: {
message:"Xherlock"
},
methods: {
getM:function(){
alert(this.message);
},
setM:function(){
this.message="Sherlock";
}
}
})
</script>
</body>
- v-model指令的作用是便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
- 绑定的数据$\longleftrightarrow$表单元素的值
