vuejs项目常用指令介绍

vue语法有哪些常用指令，下面web建站小编给大家详细介绍一下vue的常用指令！

vue常用指令

v-for

<li v-for="(item,index) in arr" :key="item.id">
  {{ item.name }}
</li>

v-if/v-else

<div v-if="false"> 如果  </div>
<div v-else> 否则 </div>

v-if/v-else-if

<p v-if="score>=90">厉害</p>
 
<p v-else-if="score>=60">差不多</p>

v-show

<div v-show="true"> 如果 </div>
 
<div v-show="false"> 否则 </div>

v-once

<template>
  <div v-once>{{count}}</div>
  <button v-on:click="addCount"> 你点我count也不加 </button>
</template>
 
<script>
  export default {
    data() {
      return { count: 10 } 
    },
    methods: { 
    addCount: function () {
        this.count += 1;
        console.log('this.count:'+this.count); 
      } 
    }
  }
</script>

v-text

<p v-text="data"> hello </p>

v-html

<p v-text="data"> good </p>

v-bind

<p :class="bind"></p>

v-model

<input v-model="test">
 
<input v-model.lazy="msg" >
 
<input v-model.trim="msg">
 
<input v-model.number="age" type="number">