其他分享
首页 > 其他分享> > vue指令

vue指令

作者:互联网

v-text(写在标签内部)简写{{}}

这个指令的作用是:设置标签的内容(textContent)

默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容

内部支持写表达式

 

v-html(写在标签内部)

这个指令的作用是:设置元素的innerHTML

内容中有HTML结构会被解析为标签

v-text指令无论内容是什么,只会被解析为文本

解析文本使用v-text,需要解析HTML结构使用v-html

 

v-no

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>data:shiyi</title>
</head>
<body>
   <div id="app">
       <input type="button" value="v-no指令" v-on:click="doIt"><!--单击生效-->
       <input type="button" value="v-no指令" v-on:dblclick="doIt">  <!--双击生效-->
       <input type="button" value="v-no指令" v-on:mouseenter="doIt">  <!--鼠标放到上面就生效生效-->
       <input type="button" value="v-no指令" @click="doIt"> <!--@等于v-on:-->>
       <h1 @click="changeFood">{{food}}</h1>  
   </div>
   <!--导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
   var vm = new Vue({
       el:"#app",
       data:{
           food:"成绩单"
      },
       methods:{        //函数就是这个样子,methods不变,function不变,
           doIt:function(){
               alert("做It");    //显示这句话
          },
           changeFood:function(){
               console.log(this.food);    //显示
           //   this.food+="完蛋" //点一下加一个完蛋
          }
      }
  })
</script>

 

 

 

v-show指令的作用是

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>data:shiyi</title>
</head>

<div id="app">
   <img v-show=isShow src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/05/02/ChMkJ1bxAUOIT8yNAAUogt9CQ0YAAOTVAGAWQkABSia466.jpg" alt="">
   <input type="button" value="是否显示图片" @click="changeIsShow">
   <img v_show="age>=18" src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/05/02/ChMkJ1bxAUOIT8yNAAUogt9CQ0YAAOTVAGAWQkABSia466.jpg" alt="" >
   <input type="button" value="累加一" @click="addAge">
</div>
<!--导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
               isShow:false,
               age:15
        },
        methods:{
           changeIsShow:function(){
             // changeIsShow=!changeIsShow;
             this.isShow=!this.isShow;
          },
           addAge:function(){
               this.age++;
          }
        }
    })
</script>

 

 

v-if

 

 

v-bind(v-bind:属性名=表达式)

(这是绑定属性,v-on是事件绑定)

设置元素的属性(如:src(图片地址),title(设置鼠标悬停的文本),class(类))

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>v-bind</title>
   <style>
      .active{
           border: 1px solid rgb(153, 0, 255);
      }
   </style>
<!--上面是将图片外面加一圈框-->
</head>
<div id="app">
   <!-- <img v-bind:src="imgSrc" alt="" v-bind:class="isActive?'active':''" @click="imgSt"> -->
   <img v-bind:src="imgSrc" alt="" v-bind:class="{active:isActive}" @click="imgSt">
<!--推荐使用第二种,对象的形式,active函数名是否存在,取决于isActive-->>
<!--第一种是三元表达式比较繁琐,不适合用-->>
   <br>
   <img v-bind:src="imgSrc" v-bind:title="imgTitle+'!!!'">  <!--字符串拼接,双括号里面只可以是单括号-->
</div>



<!--导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
   var vm = new Vue({
       el:"#app",
       data:{
           imgSrc:"http://i3.sinaimg.cn/ent/m/f/2012-08-30/U6697P28T3D3726845F329DT20120830174239.jpg",
           imgTitle:"蝙蝠侠",
           isActive:false
      },
       methods:{
           imgSt:function(){
               this.isActive=!this.isActive;
          }
      }
  })
</script>

 

v-for

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>v-for</title>
</head>
<div id = "app">
   <ul>
       <li v-for="(item,index) in arr">
        {{index+1}}  这是:{{item}}
       </li>
   </ul>
   <!--ul和li这是无序的列表-->
   <h1 v-for="happer in food" v-bind:title="happer.name">
      {{happer.name}}
   </h1>
   <input type="button" value="增加" @click="add" >
   <input type="button" value="移除" @click="removn" >
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
   var vm = new Vue({
       el:"#app",
       data:{
           arr:["贵州","贵阳","铜仁","思南"],
           food:[
              {name:"哈哈哈"},
              {name:"嘿嘿嘿"}
          ]    
      },
       methods:{
           add:function(){
               this.food.push({name:"啦啦啦"})  //增加一个对象,这里对象写死了
          },
           removn:function(){
               this.food.shift();  //移除,从上面,或者左边开始
          }
      }
  })
</script>

 

v-no补充

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>data:shiyi</title>
</head>
<body>
   <div id="app">
       <input type="button" value="v-no单击指令" v-on:click="doIt(666,'老铁')"><!--单击生效-->
       <input type="text" value="" v-on:keyup.enter="changeFood">
   </div>
   <!--导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
   var vm = new Vue({
       el:"#app",
       data:{
           food:"成绩单"
      },
       methods:{      
           doIt:function(p1,p2){
               alert("做It");   //这是弹窗
               console.log(p1);//这是在元素那个显示
               console.log(p2)
          },
           changeFood:function(){
              alert("哈哈哈哈");
          }
      }
  })
</script>
 

标签:function,vue,methods,food,元素,指令,data
来源: https://www.cnblogs.com/shiyi1/p/16538882.html