devbox
运维做开发
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue的常见指令

作者：运维做开发 | 2024-07-14 22:17:35

赞

踩

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属性值。

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

  1. <html lang="en">
  2. <head>
  3.   <meta charset="UTF-8">
  4.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7. </head>
  8. <body>
  9.  
  10.   <div id="app" >
  11.     <img v-bind:src = "path" :style="{width:width , height:height}">
  12.     <br>
  13.     <button @click = "change()">切换图片</button>
  14.   </div>
  15.   
  16.   <script type="text/javascript" src="vue.global.js"></script>
  17.   <script>
  18.     // 1.创建app
  19.     const app = Vue.createApp({
  20.       // data: option api
  21.       data: function() {
  22.         return {
  23.           path:"images/1.jpg",
  24.           width:100,
  25.           height:100
  26.         }
  27.       },
  28.       methods:{
  29.         change(){
  30.             if(this.path==="images/1.jpg"){
  31.                 this.path = "images/2.jpg"
  32.             }else{
  33.                 this.path = "images/1.jpg"
  34.             }
  35.             
  36.         }
  37.       }
  38.     })
  39.  
  40.     // 2.挂载app
  41.     app.mount("#app")
  42.   </script>
  43. </body>
  44. </html>

它的逻辑关系如下：

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

 

2. class绑定

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

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

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

        代码如下：

  1. <html lang="en">
  2. <head>
  3.   <meta charset="UTF-8">
  4.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7. </head>
  8. <body>
  9.  
  10.     <style>
  11.         li{
  12.             width: 50px;
  13.             height: 25px;
  14.             display: block;
  15.             float: left;
  16.             background-color: #999;
  17.             border: 1px solid;
  18.             padding-left: 5px;
  19.         }
  20.  
  21.         .red{
  22.             background-color: red;
  23.         }
  24.     </style>
  25.  
  26.   <div id="app">
  27.     <ul>
  28.         <li :class="{red:num==1}" @click = "change(1)">选项1</li>
  29.         <li :class="{red:num==2}" @click = "change(2)">选项2</li>
  30.         <li :class="{red:num==3}" @click = "change(3)">选项3</li>
  31.     </ul>
  32.   </div>
  33.   
  34.   <script type="text/javascript" src="vue.global.js"></script>
  35.   <script>
  36.     // 1.创建app
  37.     const app = Vue.createApp({
  38.       // data: option api
  39.       data: function() {
  40.         return {
  41.           num:1
  42.         }
  43.       },
  44.  
  45.       methods:{
  46.         change(num){
  47.             this.num = num
  48.         }
  49.       }
  50.     })
  51.  
  52.     // 2.挂载app
  53.     app.mount("#app")
  54.   </script>
  55. </body>
  56. </html>

        执行逻辑如下：

3.style绑定

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

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

  1. <html lang="en">
  2. <head>
  3.   <meta charset="UTF-8">
  4.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7. </head>
  8. <body>
  9.     <style>
  10.         li{
  11.             width: 40px;
  12.             height: 20px;
  13.             border: 2px , solid;
  14.             background-color: #999;
  15.             float: left;
  16.             display: block;
  17.         }
  18.  
  19.         #context{
  20.             clear: both;
  21.             border: 1px solid;
  22.             width: 100px;
  23.             height: 100px;
  24.             background-color: aqua;
  25.             margin-left: 40px;
  26.         }
  27.         li:hover{
  28.             background-color: red;
  29.         }
  30.        
  31.     </style>
  32.  
  33.   <div id="app">
  34.     <ul>
  35.         <li @click = "change(0)">变宽</li>
  36.         <li @click = "change(1)">变高</li>
  37.         <li @click = "change(2)">变色</li>
  38.         <li @click = "change(3)">隐藏</li>
  39.         <li @click = "change(4)">重置</li>
  40.     </ul>
  41.     <div id="context"  :style="{width:width , height:height,'background-color':color,display:none}">
  42.     </div>
  43.   </div>
  44.   
  45.   <script type="text/javascript" src="../vue.global.js"></script>
  46.   <script>
  47.     // 1.创建app
  48.     const app = Vue.createApp({
  49.       // data: option api
  50.       data: function() {
  51.         return {
  52.           width:100 , 
  53.           height:100 , 
  54.           color:'aqua' , 
  55.           none:'block'
  56.         }
  57.       },
  58.       methods:{
  59.         change(num){
  60.             if(num==0){
  61.                 this.width = this.width+10
  62.             }
  63.             if(num==1){
  64.                 this.height = this.height+10
  65.             }
  66.             if(num ==2){
  67.                 this.color = 'red' ; 
  68.             }
  69.             if(num==3){
  70.                 this.none = 'none' ; 
  71.             }
  72.             if(num==4){
  73.                 this.width = 100 ; 
  74.                 this.height = 100 ; 
  75.                 this.color = 'aqua';
  76.                 this.none = 'block'
  77.             }
  78.         }
  79.       }
  80.     })
  81.  
  82.     // 2.挂载app
  83.     app.mount("#app")
  84.   </script>
  85. </body>
  86. </html>

 实现逻辑：

效果展示：

4.v-if/v-show

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

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

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

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

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

实现代码如下：

  1. <html lang="en">
  2. <head>
  3.   <meta charset="UTF-8">
  4.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>使用v-if实现元素的显示与隐藏</title>
  7. </head>
  8. <body>
  9.     <style>
  10.         .red{
  11.             background-color: red;
  12.         }
  13.         ul , li{
  14.            
  15.             float: left;
  16.             display: block;
  17.             margin-left: 10px;
  18.             background: color #999;
  19.             
  20.         }
  21.  
  22.         li{
  23.             border: 1px red;
  24.             height: 30px;
  25.             width: 100px;
  26.             text-align: center;
  27.         }
  28.         li:hover{
  29.             background-color: red;
  30.         }
  31.         #context{
  32.            clear: both;
  33.         }
  34.     </style>
  35.  
  36.   <div id="title">
  37.     <ul>
  38.         <li :class="{red:flag==0}" @click ="change(0)">清纯男大</li>
  39.         <li :class="{red:flag==1}" @click="change(1)">油腻骚男</li>
  40.         <li :class="{red:flag==2}" @click="change(2)">怀院校草</li>
  41.     </ul>
  42.     
  43.         <ul id="context">
  44.             <li v-if="flag==0">刘驰宇</li>
  45.             <li v-if="flag==1">李杭涛</li>
  46.             <li v-show="flag==2">黄嘉乐</li>
  47.         </ul>
  48.   </div>
  49.  
  50.   
  51.   
  52.   <script type="text/javascript" src="../vue.global.js"></script>
  53.   <script>
  54.     // 1.创建app
  55.     const app = Vue.createApp({
  56.         
  57.       // data: option api
  58.       data: function() {
  59.         return{
  60.            
  61.             flag : 0
  62.         }
  63.       },
  64.       
  65.       methods:{
  66.         change(flag){
  67.             this.flag = flag;
  68.         
  69.         }
  70.       }
  71.     })
  72.  
  73.     // 2.挂载app
  74.       app.mount("#title")
  75.  
  76.  
  77.   </script>
  78. </body>
  79. </html>

主要逻辑如下：

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/826516
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号