常用指令:
指令:HTML标签上带有 v-前缀 的特殊属性,不同指令具有不同含义。例如:v-if,v-for...
指令 作用
v-bind 为HTML标签绑定属性值,如设置href,css样式等
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
v-if
v-else
v-else-if 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-show 根据条件展示某元素,区别在于切换的是display属性的值
v-for 列表渲染,遍历容器的元素或者对象的属性
注意事项:
通过v-bind或者v-model绑定的变量,必须在数据模型中声明
通过v-bind中设置的属性与v-model中的内容进行双向绑定,使得通过修改v-model中的内容达到修改v-bind中属性值的目的,因为Vue具有双向绑定的特征(视图与模型中的数据双向绑定,一个变,另一个跟着变)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-指令-v-bind和v-model</title>
<!-- 1.首先引入vue.js -->
<script src="js/vue.js"></script>
</head>
<!--
常用指令:
指令:HTML标签上带有 v-前缀 的特殊属性,不同指令具有不同含义。例如:v-if,v-for...
指令 作用
v-bind 为HTML标签绑定属性值,如设置href,css样式等
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
v-if
v-else
v-else-if 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-show 根据条件展示某元素,区别在于切换的是display属性的值
v-for 列表渲染,遍历容器的元素或者对象的属性
注意事项:
通过v-bind或者v-model绑定的变量,必须在数据模型中声明
-->
<body>
<!-- 3.指定vue要操作的视图区域 -->
<div id = "app">
<a v-bind:href="url" >链接1</a>
<a :href="url" >链接2</a> <!-- v-bind可以省略 -->
<input type="text" v-model="url">
</div>
</body>
<script>
// 2.创建Vue核心对象,定义数据类型,函数
new Vue({
el:"#app",
data: {
url:"https://www.baidu.com"
}
})
</script>
</html>