一、v-bind : 用于HTML属性中值的更新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind 用于HTML属性中值的更新 </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href="url">百度一下</a>
</div>
<script>
new Vue({
el:"#app", //表示要绑定的 div是谁 ,类似于jquery的id选择器
data:{ //数据源 ,这里的数据用于显示到 <div>标签中 , 将来此处的数据源是动态传递的
url:"http://www.baidu.com"
}
})
</script>
</body>
</html>
二、v-if v-else: 判断逻辑
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> v-if v-else: 判断逻辑 </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="Math.random() > 0.5"> 结果大于0.5</div>
<div v-else> 结果小于0.5!!!!!!!</div>
</div>
<script>
new Vue({
el:"#app", //表示要绑定的 div是谁 ,类似于jquery的id选择器
data:{ //数据源 ,这里的数据用于显示到 <div>标签中 , 将来此处的数据源是动态传递的
}
})
</script>
</body>
</html>
三.v-model : 数据双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model : 数据双向绑定 </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{phone}}
<br>
<input type="text" v-model="phone">
</div>
<script>
new Vue({
el:"#app", //表示要绑定的 div是谁 ,类似于jquery的id选择器
data:{ //数据源 ,这里的数据用于显示到 <div>标签中 , 将来此处的数据源是动态传递的
phone:"1000212"
}
})
</script>
</body>
</html>
四.v-on :事件绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on :事件绑定 </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{str}}
<br>
<button v-on:click="show"> 点击 </button>
</div>
<script>
new Vue({
el:"#app", //表示要绑定的 div是谁 ,类似于jquery的id选择器
data:{ //数据源 ,这里的数据用于显示到 <div>标签中 , 将来此处的数据源是动态传递的
str:"你好"
},
methods:{
show(){
this.str = "今天天气真好"
}
}
})
</script>
</body>
</html>
v- for : 数据循环
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> v- for : 数据循环 </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="p in products">
{{p.name}}
</div>
<hr>
<ol>
<li v-for="p1 in products">
{{p1.name}}
</li>
</ol>
</div>
<script>
new Vue({
el:"#app", //表示要绑定的 div是谁 ,类似于jquery的id选择器
data:{ //数据源 ,这里的数据用于显示到 <div>标签中 , 将来此处的数据源是动态传递的
//提供一个集合数据
products:[
{name:"ip20"},
{name:"小米11"},
{name:"mysql"}
]
}
})
</script>
</body>
</html>
总结
可自行复制代码块内容查看效果