目录
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.创建app const app = Vue.createApp({ // data: option api data: 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.挂载app app.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.创建app const app = Vue.createApp({ // data: option api data: function() { return { num:1 } }, methods:{ change(num){ this.num = num } } }) // 2.挂载app app.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.创建app const app = Vue.createApp({ // data: option api data: 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.挂载app app.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.创建app const app = Vue.createApp({ // data: option api data: function() { return{ flag : 0 } }, methods:{ change(flag){ this.flag = flag; } } }) // 2.挂载app app.mount("#title") </script> </body> </html>主要逻辑如下：
