常用指令
- 指令：HTML标签上带有V-前缀的特殊属性，不同指令具有不同含义。
- 常用指令
| 指令 | 作用 |
|---|---|
| v-bind | 为HTML标签绑定属性值，如设置href , css样式等 |
| v-model | 在表单元素上创建双向数据绑定 |
| v-on | 为HTML标签绑定事件 |
| v-if | 条件性的渲染某元素,判定为true时渲染,否则不渲染 |
| v-else-if | 条件性的渲染某元素,判定为true时渲染,否则不渲染 |
| v-else | 条件性的渲染某元素,判定为true时渲染,否则不渲染 |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-for | 列表渲染,遍历容器的元素或者对象的属性 |
v-bind
- 绑定html标签的属性值
<a v-bind:href="url">链接1</a>
<a :href="url">链接2</a>
v-model
- 在表单元素上创建双向数据绑定
<input type="text" v-model="url">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-指令</title>
<script src="Vue.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href="url">链接1</a>
<a :href="url">链接2</a>
<input type="text" v-model="url">
</div>
<script>
new Vue({
el:"#app",
data:{
url: "https://www.baidu.com"
}
} )
</script>
</body>
</html>
一旦通过v-bind或者v-model绑定了一个变量，这个变量必须在数据模型中声明
v-on
- 为HTML标签绑定事件
<div id="app">
<input type="button" value="点我一下" v-on:click="handle()">
//简写
<input type="button" value="点我一下" @click="handle()">
</div>
<script>
new Vue({
el:"#app",//vue接管区域
data:{
},
methods:{
handle:function () {
alert("你点我一下");
}
}
})
</script>