不再犹豫Vue.js的指令是指v-开头，作用于html标签，提供一些特殊的特性，当指令被绑定到html元素的时候，指令会为被绑定的元素添加一些特殊的行为，可以将指令看成html的一种属性；
（1）v-text：
数据绑定标签，将vue对象data中的属性绑定给对应的标签作为内容显示出来，类似js的text属性；
（2）v-html：
类似v-text标签，他是将data的属性作为html语法输出，类似js中的innerHtml属性；
（3）v-on：==@ methods:{}
缩写 @
参数：event
给dom添加一个事件监听
计数器实例：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计数器</title>
</head>
<body>
<div id="app">
<div>
<button @click="sub">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
num:1
},
methods:{
sub:function(){
if(this.num > 0){
this.num--
}else{
alert('最小值为0！')
}
},
add:function(){
if(this.num < 10){
this.num++
}else{
alert('最大值为10！')
}
},
}
})
</script>
</body>
</body>
</html>（4）v-show：
根据表达式的真假来切换所绑定的dom的display属性
(5)v-if and v-else and v-else-if
- v-if v-if和v-show功能差不多，都是用来控制dom的显隐，用法也一样，只是原理不同，当v-if=”false”时，dom被直接删除掉；为true时，又重新渲染此dom；
- v-else v-else用来表示v-if=””的else情况
- v-else-if
综上 if， else， else if，都是用来控制显隐的
v-show 和 v-if 区别：
v-if 删除/添加页面的Dom元素，所v-if 有更高的切换消耗。
v-show切换css的display属性，因此有较高的初始化渲染消耗。
因此:–> 如果需要频繁切换的需求场景v-show比较合适,反之v-if 较好。
(6)v-bind
缩写 ：
参数 ： attr/Prop (optional)
用于将vue的值绑定给对应dom的属性值
实例 图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片切换</title>
</head>
<body>
<div id="mask">
<div>
<a href="javascript:void(0)" v-show="index!=0" @click="prev">《</a>
<a href="javascript:void(0)" v-show="index<imgsrc.length-1" @click="next">》</a>
<img :src="imgsrc[index]" alt="">
</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#mask',
data:{
imgsrc:[
'./images/001.png',
'./images/002.png',
'./images/003.png',
'./images/004.png'
],
index:0
},
methods:{
prev:function(){
this.index--
},
next:function(){
this.index++
},
}
})
</script>
</body>
</body>
</html>欢迎大家关注公众号：
评论前必须登录！
注册