Vue的常见指令

目录

1.v-bind

2. class绑定

3.style绑定

4.v-if/v-show

 

---

1.v-bind

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

        它的作用就是我们可以动态的定义属性的值，比如常见的

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

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

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

  
  
  
  Document


  
    

    切换图片
  
  
  
  
    // 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")
  

它的逻辑关系如下：

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

 

2. class绑定

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

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

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

        代码如下：

  
  
  
  Document


    
        li{
            width: 50px;
            height: 25px;
            display: block;
            float: left;
            background-color: #999;
            border: 1px solid;
            padding-left: 5px;
        }
        .red{
            background-color: red;
        }
    
  
    

• 选项1
• 选项2
• 选项3

// 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")

        执行逻辑如下：

3.style绑定

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

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

  
  
  
  Document


    
        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;
        }
       
    
  
    

• 变宽
• 变高
• 变色
• 隐藏
• 重置

// 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")

 实现逻辑：

效果展示：

4.v-if/v-show

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

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

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

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

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

实现代码如下：

  
  
  
  使用v-if实现元素的显示与隐藏


    
        .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;
        }
    
  
    

• 清纯男大
• 油腻骚男
• 怀院校草

• 刘驰宇
• 李杭涛
• 黄嘉乐

// 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")

主要逻辑如下：