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

vue语法中v-if和v-show哪个性能好

v-html样式不生效怎么解决

vue语法中v-show和v-if有什么不同

vue语法中有哪些隐藏元素的指令

v-for循环绑定el-color-picker颜色选择器绑定value/v-model值

标签： v-bind, v-html, v-model, v-once, v-show, v-text, 常用指令

上面是“vuejs项目常用指令介绍”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3065.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！