2. 常用指令
指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。
在vue中，提供了很多指令，常用的有：v-if、v-model、v-for等等。
指令会在vm对象的data属性的数据发生变化时，会同时改变元素中的其控制的内容或属性。
因为vue的历史版本原因，所以有一部分指令都有两种写法：
vue1.x写法 vue2.x的写法
v-html ----> {{ 普通文本 }} # vue2.x 也支持v-html,v-text，输出html代码的内容
v-bind:属性名 ----> :属性
v-on:事件名 ----> @事件名
2.1 操作属性
格式：
<标签名 :标签属性=“data属性”></标签名>
<p :title="str1">{{ str1 }}</p> <!-- 也可以使用v-html显示双标签的内容，{{ }} 是简写 -->
<a :href="url2">淘宝</a>
显示wifi密码效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input :type="tp">
<input type="button" @mousedown="down" @mouseup="up" v-model="message">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"显示密码",
tp:"password",
},
methods:{
down(){
// 在methods中的子方法里面要操作data的属性，可以使用this.属性值
this.tp="text";
this.message="隐藏密码";
},
up(){
this.tp="password";
this.message="显示密码";
}
}
})
</script>
</body>
</html>
2.2 事件绑定
有两种事件操作的写法，@事件名 和 v-on:事件名
<button @click="num+=5">按钮2</button>
总结：
- 使用@事件名来进行事件的绑定
语法：
- 绑定的事件的事件名，全部都是js的事件名：
@submit —> onsubmit
@focus —> onfocus
…
完成商城购物车中的商品增加减少数量
步骤：
给vue对象添加操作数据的方法
在标签中使用指令调用操作数据的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="add">+</button>
<input type="text" v-model="num">
<button @click="sub">-</button>
单价：{{price}}
<!-- 保留两位小数-->
<p>总计：{{total.toFixed(2)}}</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
num: 1,
price: 39.8,
total: 39.8,
},
methods:{
add(){
// 增加数量 转化数字相加
this.num = parseInt(this.num) + 1;
this.calc();
},
sub(){
// 减少数量
if(this.num<=1){
return;
}
this.num -= 1;
this.calc();
},
calc(){
// 计算总价
this.total = this.price * this.num;
}
}
})
</script>
</body>
</html>
2.3 操作样式
2.3.1 控制标签class类名
格式：
<h1 :class="值">元素</h1> 值可以是字符串、对象、对象名、数组
- 给元素绑定class类名，最常用的就是第二种。
vue对象的data数据：
data:{
myObj:{
complete:true,
uncomplete:false,
}
}
html元素：
<div class="box" :class="myObj">2222</div>
最终浏览器效果：
<div class="box complete">2222</div>
控制白天黑夜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.bg{
width: 300px;
height: 1000px;
}
.baitian{
background-color: white;
}
.heiye{
background-color: #666;
}
</style>
</head>
<body>
<div id="app" class="bg" :class="{baitian:is_show,heiye:is_show_2}">
<button @click="change">关灯</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
is_show:true,
is_show_2:false
},
methods:{
change(){
if(this.is_show==true){
this.is_show=false;
this.is_show_2=true;
}else{
this.is_show=true;
this.is_show_2=false;
}
}
}
})
</script>
</body>
</html>
2.3.2 控制标签style样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div style="width:100px;height:100px;" :style="{backgroundColor:`#6f6`}"></div>
<div style="" :style="box"></div>
<div style="" :style="[box,box2]"></div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
box:{
backgroundColor:`#6f6`,
width:"100px",
height:"100px",
},
box2:{
borderRadius:"50px", // borderRadius 边框圆角
}
},
})
</script>
</body>
</html>
2.3.2 实例-vue版本选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#card{
width: 500px;
height: 350px;
}
.title{
height:50px;
}
.title span{
width: 100px;
height: 50px;
background-color:#ccc;
display: inline-block;
line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */
text-align:center;
}
.content .list{
width: 500px;
height: 300px;
background-color: yellow;
display: none;
}
.content .active{
display: block;
}
.title .current{
background-color:yellow;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="card">
<div class="title">
<span @mouseover="num=1" :class="num==1?'current':''">国内新闻</span>
<span @mouseover="num=2" :class="num==2?'current':''">国际新闻</span>
<span @mouseover="num=3" :class="num==3?'current':''">银河新闻</span>
</div>
<div class="content">
<div class="list" :class="num==1?'active':''">国内新闻列表</div>
<div class="list" :class="num==2?'active':''">国际新闻列表</div>
<div class="list" :class="num==3?'active':''">银河新闻列表</div>
</div>
</div>
<script>
// 实现一个js的特效时：关键是找出3个数据出来
// 1. 用户操作的元素
// 2. 用户触发的事件
// 3. 事件触发以后的效果是什么？
var vm = new Vue({
el:"#card",
data:{
num:1,
}
})
</script>
</body>
</html>
思路：
当用户点击标题栏的按钮[span]时，显示对应索引下标的内容块[.list]
代码实现：
2.4 条件渲染指令
vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。
2.4.1 v-if
标签元素：
<h1 v-if="ok">Yes</h1>
data数据：
data:{
ok:false // true则是显示，false是隐藏
}
2.4.2 v-else
v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
标签元素：
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
data数据：
data:{
ok:false // true则是显示，false是隐藏
}
2.4.3 v-else-if
可以出现多个v-else-if语句，但是v-else-if之前必须有一个v-if开头。后面可以跟着v-else，也可以没有。
标签元素：
<h1 v-if="num==1">num的值为1</h1>
<h1 v-else-if="num==2">num的值为2</h1>
<h1 v-else>num的值是{{num}}</h1>
data数据：
data:{
num:2
}
2.4.4 v-show
用法和v-if大致一样，区别在于2点：
v-show后面不能v-else或者v-else-if
v-show隐藏元素时，使用的是display:none来隐藏的，而v-if是直接从HTML文档中移除元素[ DOM操作中的remove ]
标签元素：
<h1 v-show="ok">Hello!</h1>
data数据：
data:{
ok:false // true则是显示，false是隐藏
}
2.5 列表渲染指令
在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象。
数据是数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" width="800px">
<tr>
<th>序号</th>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr v-for="v,k in student_list">
<td>{{k+1}}</td>
<td>{{v.id}}</td>
<td>{{v.name}}</td>
<td>{{v.age}}</td>
</tr>
</table>
</div>
<script>
var vm1 = new Vue({
el:"#app",
data:{
student_list:[
{"id":1,"name":"zbb","age":18},
{"id":1,"name":"zbb","age":18},
{"id":1,"name":"zbb","age":18},
{"id":1,"name":"zbb","age":18},
{"id":1,"name":"zbb","age":18},
]
},
})
</script>
</body>
</html>
数据是对象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<ul id="app">
<!-- v是每一个value值,j是每一个键名-->
<li v-for="v, j in book">{{j}}:{{v}}</li>
</ul>
<script>
var vm1 = new Vue({
el:"#app",
data:{
book: {
// "attr":"value"
"id":11,
"title":"图书名称1",
"price":200
},
},
})
</script>
</body>
</html>
练习：
goods:[
{"name":"python入门","price":150},
{"name":"python进阶","price":100},
{"name":"python高级","price":75},
{"name":"python研究","price":60},
{"name":"python放弃","price":110},
]
把上面的数据采用table表格输出到页面，价格大于60的数据需要添加背景色橙色[orange]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
.orange{
background: orange ;
}
</style>
<body>
<div id="app">
<table border="1" width="800px">
<tr>
<th>序号</th>
<th>课程</th>
<th>价格</th>
</tr>
<tr v-for="v,k in goods" :class="v.price>60?'orange':''">
<td>{{k+1}}</td>
<td>{{v.name}}</td>
<td>{{v.price}}</td>
</tr>
</table>
</div>
<script>
var vm1 = new Vue({
el: "#app",
data: {
goods: [
{"name": "python入门", "price": 150},
{"name": "python进阶", "price": 100},
{"name": "python高级", "price": 75},
{"name": "python研究", "price": 60},
{"name": "python放弃", "price": 110},
]
},
})
</script>
</body>
</html>
2.6 在表中添加数据
第一步:
循环表格, 编写添加对话框, 更新列表，编写删除按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
.win {
background: orange;
width: 300px;
height: 100px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
<body>
<div id="app">
<table border="1" width="800px" align="center">
<td colspan="5">
<button @click="win_show = 1">add</button>
</td>
<tr>
<th>序号</th>
<th>课程</th>
<th>价格</th>
<th>按钮</th>
</tr>
<tr v-for="v,k in goods">
<td>{{k+1}}</td>
<td>{{v.name}}</td>
<td>{{v.price}}</td>
<td>
<button>edit</button>
<button @click="del(k)">del</button>
</td>
</tr>
</table>
<div class="win" v-show=win_show>
<lable>课程：<input type="text" v-model="name"></lable>
<br>
<lable>价格：<input type="text" v-model="price"></lable>
<br>
<button @click="sava">确定</button>
<button @click="close">取消</button>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
win_show: false,
goods: [
{"name": "python入门", "price": 150},
{"name": "python进阶", "price": 100},
{"name": "python高级", "price": 75},
{"name": "python研究", "price": 60},
{"name": "python放弃", "price": 110},
],
name: "",
price: "",
},
methods: {
sava() {
// 追加成员
this.goods.push({
"name": this.name,
"price": this.price
});
this.close();
},
close() {
// 关闭窗口
this.win_show = false;
// 清空窗口中的数据
this.title = "";
this.number = "";
this.price = ""
},
del(k){
this.goods.splice(k,1)
}
}
})
</script>
</body>
</html>
第二步，编辑按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
.win {
background: orange;
width: 300px;
height: 100px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
<body>
<div id="app">
<table border="1" width="800px" align="center">
<td colspan="5">
<button @click="win_show = 1">add</button>
</td>
<tr>
<th>序号</th>
<th>课程</th>
<th>价格</th>
<th>按钮</th>
</tr>
<tr v-for="v,k in goods">
<td>{{k+1}}</td>
<td>{{v.name}}</td>
<td>{{v.price}}</td>
<td>
<button @click="edit(k)">edit</button>
<button @click="del(k)">del</button>
</td>
</tr>
</table>
<div class="win" v-show=win_show>
<lable>课程：<input type="text" v-model="name"></lable>
<br>
<lable>价格：<input type="text" v-model="price"></lable>
<br>
<button @click="sava">确定</button>
<button @click="close">取消</button>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
win_show: false,
goods: [
{"name": "python入门", "price": 150},
{"name": "python进阶", "price": 100},
{"name": "python高级", "price": 75},
{"name": "python研究", "price": 60},
{"name": "python放弃", "price": 110},
],
name: "",
price: "",
current: -1, //没有编辑任何的内容
},
methods: {
sava() {
if (this.current == -1) {
// 追加成员
this.goods.push({
"name": this.name,
"price": this.price
});
}else{
//编辑
this.goods[this.current].name=this.name;
this.goods[this.current].price=this.price;
}
this.close();
},
close() {
// 关闭窗口
this.win_show = false;
//重置编辑操作
this.current=-1
// 清空窗口中的数据
this.title = "";
this.number = "";
this.price = ""
},
del(k) {
this.goods.splice(k, 1)
},
edit(k){
this.current=k;
this.name=this.goods[k].name;
this.price=this.goods[k].price;
this.win_show=1;
}
}
})
</script>
</body>
</html>
486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
