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.创建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>

主要逻辑如下：