Vue的常见指令

1.v-bind

2. class绑定

3.style绑定

4.v-if/v-show

1.v-bind

v-bind指令用于绑定属性可以简写成 “ ：”

它的作用就是我们可以动态的定义属性的值，比如常见的<img src = "1.jpg">

我们如果想要修改图片就需要获取到DOM对象，然后再重新填充，但是如果使用v-bind，

我们就可以动态的生成src属性值。

下面我们将实现图片切换的效果：

<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>Document</title>
</head>
<body><div id="app" ><img v-bind:src = "path" :style="{width:width , height:height}"><br><button @click = "change()">切换图片</button></div><script type="text/javascript" src="vue.global.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata: function() {return {path:"images/1.jpg",width:100,height:100}},methods:{change(){if(this.path==="images/1.jpg"){this.path = "images/2.jpg"}else{this.path = "images/1.jpg"}}}})// 2.挂载appapp.mount("#app")</script>
</body>
</html>

它的逻辑关系如下：

所以说，vue主要是实现对数据的操作，而js是对DOM对象的操作

2. class绑定

class是表示类选择器，常用的还有id选择器等。

v-bind同样可以绑定class，只是写法略有不同。

接下来，我们实现经常在网页上看见的多选项选择时，选到哪个，哪个就会高亮显示。

代码如下：

<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>Document</title>
</head>
<body><style>li{width: 50px;height: 25px;display: block;float: left;background-color: #999;border: 1px solid;padding-left: 5px;}.red{background-color: red;}</style><div id="app"><ul><li :class="{red:num==1}" @click = "change(1)">选项1</li><li :class="{red:num==2}" @click = "change(2)">选项2</li><li :class="{red:num==3}" @click = "change(3)">选项3</li></ul></div><script type="text/javascript" src="vue.global.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata: function() {return {num:1}},methods:{change(num){this.num = num}}})// 2.挂载appapp.mount("#app")</script>
</body>
</html>

执行逻辑如下：

3.style绑定

style表示样式，同样我们也可以用vue绑定style，实现样式属性的动态生成。

我们实现一个按钮控制一个div盒子的长宽高，颜色等样式，示例如下：

<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>Document</title>
</head>
<body><style>li{width: 40px;height: 20px;border: 2px , solid;background-color: #999;float: left;display: block;}#context{clear: both;border: 1px solid;width: 100px;height: 100px;background-color: aqua;margin-left: 40px;}li:hover{background-color: red;}</style><div id="app"><ul><li @click = "change(0)">变宽</li><li @click = "change(1)">变高</li><li @click = "change(2)">变色</li><li @click = "change(3)">隐藏</li><li @click = "change(4)">重置</li></ul><div id="context"  :style="{width:width , height:height,'background-color':color,display:none}"></div></div><script type="text/javascript" src="../vue.global.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata: function() {return {width:100 , height:100 , color:'aqua' , none:'block'}},methods:{change(num){if(num==0){this.width = this.width+10}if(num==1){this.height = this.height+10}if(num ==2){this.color = 'red' ; }if(num==3){this.none = 'none' ; }if(num==4){this.width = 100 ; this.height = 100 ; this.color = 'aqua';this.none = 'block'}}}})// 2.挂载appapp.mount("#app")</script>
</body>
</html>

实现逻辑：

效果展示：

4.v-if/v-show

v-if 指令条件渲染.如果条件为true，那么它会生成一个DOM元素并且插入；

如果为false，那么直接连DOM元素都不生成。

v-show作用和v-if一样，只是当它为true或者false都会生成DOM对象；

只是当然为false时，会把DOM对象隐藏起来。

示例：实现点击哪个按钮显示对应的内容，其他的内容会被隐藏，效果如下：

实现代码如下：

<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实现元素的显示与隐藏</title>
</head>
<body><style>.red{background-color: red;}ul , li{float: left;display: block;margin-left: 10px;background: color #999;}li{border: 1px red;height: 30px;width: 100px;text-align: center;}li:hover{background-color: red;}#context{clear: both;}</style><div id="title"><ul><li :class="{red:flag==0}" @click ="change(0)">清纯男大</li><li :class="{red:flag==1}" @click="change(1)">油腻骚男</li><li :class="{red:flag==2}" @click="change(2)">怀院校草</li></ul><ul id="context"><li v-if="flag==0">刘驰宇</li><li v-if="flag==1">李杭涛</li><li v-show="flag==2">黄嘉乐</li></ul></div><script type="text/javascript" src="../vue.global.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata: function() {return{flag : 0}},methods:{change(flag){this.flag = flag;}}})// 2.挂载appapp.mount("#title")</script>
</body>
</html>

主要逻辑如下：