vue常见指令

VUE常见指令

• • v-text
  • v-html
  • v-bind
  • v-if v-else-if v-else
  • v-show
  • v-for
  • v-on
  • v-model

v-text

// 输出一个字符串
<template>
    <!-- vue主文件 -->
    <div v-text="'我是1811A的一名普普通通的帅气的讲师'">
        
    </div>
</template>

v-html

// 编译html标签
<template>
    <!-- vue主文件 -->
    <div v-html="'<h1>我是1811A的一名普普通通的帅气的讲师</h1>'">
        
    </div>
</template>

v-bind

// 可以吧元素当中的任何一个属性设置成变量 缩写“：”
<template>
  <!-- vue主文件 -->
  <div>
    <input v-bind:type="type" />
    <input :type="type" />
  </div>
</template>

<script>
export default {
  name: "app",
  // 当前页面的状态管理器
  data() {
    return {
      type: "checkbox",
    };
  },
  // 当前页面所有方法的集合
  methods: {
  }
};
</script>

v-if v-else-if v-else

// 简单的js语句判断，不会去编译值为flase的语句
<template>
    <!-- vue主文件 -->
    <div>
        <div v-if="type === 2">
            1811A最棒
        </div>
        <div v-else-if="type === 1">
            1811A
        </div>
        <div v-else>
            我是1811A讲师 
        </div>
    </div>
</template>

<script>
export default {
    name: 'app',
    // 当前页面的状态管理器
    data() {
        return {
            type: 5
        }
    }
}
</script>

v-show

// 判断简单的js语句，回去编译值为flase的语句，编译之后的样式更改为display：none
<template>
  <!-- vue主文件 -->
  <div>
    <div v-show="true">1811A</div>
  </div>
</template>

v-for

// 在元素中遍历数据 注意：一定要加key，被遍历的数据一定要是数组
<template>
  <!-- vue主文件 -->
  <div>
    <div v-for="(item, idx) in list" :key="idx" class="items">
        <span>{{item.class}}讲师：{{item.name}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  // 当前页面的状态管理器
  data() {
    return {
      list: [
        {
          class: "1811A",
          name: "小刚"
        },
        {
          class: "1810A",
          name: "小东"
        }
      ]
    };
  }
};
</script>

v-on

// 指令用于给监听DOM事件 缩写为@
<template>
  <!-- vue主文件 -->
  <div>
      <span @click="isShow">按钮</span>
      <span v-on:click="isShow"></span>
  </div>
</template>

<script>
export default {
  name: "app",
  // 当前页面的状态管理器
  data() {
    return {
      list: [
        {
          class: "1811A",
          name: "小刚"
        },
        {
          class: "1810A",
          name: "小东"
        }
      ]
    };
  },
  // 当前页面所有方法的集合
  methods: {
      isShow() {
          console.log(this)
      }
  }
};
</script>

v-model

// 数据的双向邦定
<template>
  <!-- vue主文件 -->
  <div>
    <input v-model="value" />
    <span @click="changeInput">按钮</span>
  </div>
</template>

<script>
export default {
  name: "app",
  // 当前页面的状态管理器
  data() {
    return {
      value: ""
    };
  },
  // 当前页面所有方法的集合
  methods: {
    changeInput() {
        this.value = '1811A'
    }
  }
};
</script>