目录
v-bind & v-model
介绍
案例(1)
v-on
介绍
案例(2)
v-if & v-show
介绍
案例(3)
v-for
介绍
案例(4)
案例(5)
基础表结构及数据
具体实现
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课程