目录
Vue常用指令
- 指令:HTML 标签上带有v-前缀的特殊属性,不同指令具有不同含义。例如:v-if,v-for..
- 常用指令
指令 | 作用 |
---|---|
v-bind | 为HTML标签绑定属性值,如设置href,css样式等 |
v-model | 在表单元素上创建双向数据绑定 |
v-on | 为HTML标签绑定事件 |
v-if | 条件性的渲染某元素,判定为true时渲染,否则不渲染 |
v-else-if | |
v-else | |
v-show | 根据条件展示某元素,区别在于切换的是display属性的值 |
v-for | 列表渲染,遍历容器的元素或者对象的属性 |
v-bind & v-model
介绍
- v-bind
<a v-bind:href="url">百度</a>
//or
<a :href="url">百度</a>
<script>
new Vue({
el:"#app",
data:{
url:"https://www.baidu.com"
}
})
</script>
- v-model
<input type="text" v-model="url">
注意事项:
- 通过v-bind或者v-model绑定的变量,必须在数据模型中声明。
案例(1)
<!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>常用指令-v-bind-v-model</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href="url" target="_blank">链接1</a>
<a :href="url" target="_blank">链接2</a>
<input type="text" v-model="url">
</div>
</body>
<script>
//定义Vue对象
new Vue({
el:"#app", //Vue接管区域
data:{
url:"https://www.baidu.com"
}
})
</script>
</html>
运行结果:
v-on
介绍
<input type="button" value="按钮" v-on:click="handle()">
<input type="button" value="按钮" @click="handle()">
<script>
new Vue({
el:"#app",
data:{
//...
},
methods:{
handle:function(){
alert('我被点击了');
}
}
})
</script>
案例(2)
<!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>常用指令-v-on</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点我一下" v-on:click="handle()">
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
//...
},
methods:{
handle:function(){
alert('你点了我一下...');
}
}
})
</script>
</html>
运行结果:
v-if & v-show
介绍
- v-if
年龄{{ age }},经判定为:
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>
- v-show
年龄{{ age }},经判定为:
<span v-show="age <= 35">年轻人</span>
案例(3)
<!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>常用指令-v-if-v-show</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
年龄 <input type="text" v-model="age"> 经判定,为:
<span v-if="age <= 35 && age > 0">年轻人</span>
<span v-else-if="age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>
<br><br>
年龄 <input type="text" v-model="age"> 经判定,为:
<span v-show="age <= 35 && age > 0">年轻人</span>
<span v-show="age > 35 && age < 60">中年人</span>
<span v-show="age >= 60">老年人</span>
</div>
</body>
<script>
//定义Vue对象
new Vue({
el:"#app", //Vue接管区域
data:{
age:10
}
})
</script>
</html>
运行结果:
v-for
介绍
- v-for
<div v-for="addr in addrs">{{ addr }}</div>
<div v-for="(addr,index)in addrs">{{ index +1 }} : {{ addr }}</div>
data:{
...
addrs:['北京','上海','广州','深圳','成都','杭州']
},
案例(4)
<!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>常用指令-v-for</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="addr in addrs">{{ addr }}</div>
<hr>
<div v-for="(addr, index) in addrs">{{ index + 1 }} : {{ addr }}</div>
</div>
</body>
<script>
//定义Vue对象
new Vue({
el:"#app",
data:{
addrs:['北京','上海','广州','深圳','成都','杭州']
},
methods:{
}
})
</script>
</html>
运行结果:
案例(5)
通过Vue完成表格数据的渲染展示:
基础表结构及数据
<!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>常用指令-案例</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr align="center">
<td>1</td>
<td>Tom</td>
<td>20</td>
<td>
<span>男</span>
<span>女</span>
</td>
<td>70</td>
<td>
<span>优秀</span>
<span>及格</span>
<span style="color: red;">不及格</span>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
users: [{
name: "Tom",
age: 20,
gender: 1,
score: 78
},{
name: "Rose",
age: 18,
gender: 2,
score: 86
},{
name: "Jerry",
age: 26,
gender: 1,
score: 90
},{
name: "Tony",
age: 30,
gender: 1,
score: 52
}]
},
methods: {
},
})
</script>
</html>
具体实现
最终效果:
END
学习自:黑马程序员——JavaWeb课程