veu的常用指令（复习使用）

veu的常用指令

还得是代码编辑器看的清晰，就不上文字了，岂不美哉O(∩_∩)O哈哈~

<template>
  <div class="home">
    <h1>vue常用指令</h1>
    <!-- 
      v-text  渲染文本，但是不能编译标签语言
      v-html  渲染文本，但是可以编译标签语言
      v-on    绑定事件  可以简写为@
      v-bind  动态绑定属性  可以简写为  ：
      一下两个都可以控制元素的显示和隐藏
      v-show  通过css样式display：none 控制元素的隐藏
      v-if    通过dom节点的创建和销毁来控制元素的显示和隐藏
      v-once  只渲染一次
      v-pre   不编译
      v-cloak   防止差值闪烁问题
      v-for     循环列表
      v-model   form表单的双向数据绑定
     -->

    <h3>v-text 渲染文本，但是不能编译标签语言</h3>
    <h5 v-text="'v-text'"></h5>
    <h5 v-text="'<span>v-text</span>'"></h5>
    <h3>v-html 渲染文本，但是可以编译标签语言</h3>
    <h5 v-html="'v-html'"></h5>
    <h5 v-html="'<span>v-html</span>'"></h5>
    <h3>v-on 绑定事件 可以简写为@</h3>
    <h5>{{ num }}</h5>
    <h5>{{ num }}</h5>
    <button v-on:click="add">num++</button>
    <button @click="add">num++</button>
    <h3>v-bind 动态绑定属性 可以简写为 ：</h3>
    <h5 :style="'color:' + (num < 3 ? 'blue' : num < 5 ? 'red' : 'pink')">
      属性就是标签本有的，如class，id，name，style
    </h5>
    <h5
      :class="{
        bluecolor: num < 3,
        redcolor: num >= 3 && num < 5,
        pinkcolor: num >= 5,
      }"
    >
      属性就是标签本有的，如class，id，name，style
    </h5>
    <h3>一下两个都可以控制元素的显示和隐藏</h3>
    <h3>v-show 通过css样式display：none 控制元素的隐藏</h3>
    <h5 v-show="num >= 3">我爱你呀</h5>
    <h3>v-if 通过dom节点的创建和销毁来控制元素的显示和隐藏</h3>
    <h5 v-if="num < 3">111</h5>
    <h5 v-else-if="num < 5">222</h5>
    <h5 v-else>333</h5>
    <h3>v-once 只渲染一次,但是数据还是变化的</h3>
    <h5>{{ num }}</h5>
    <h5 v-once>{{ num }}</h5>
    <h3>v-pre 不编译</h3>
    <h5>{{ num }}</h5>
    <h5 v-pre>{{ num }}</h5>
    <h3>v-cloak 防止差值闪烁问题</h3>
    <h5 v-cloak>{{ num }}</h5>
    <h3>v-for 循环列表</h3>
    <h5>遍历数组ele为元素，index为下标</h5>
    <ul>
      <li v-for="(ele, index) in list">{{ ele }}---{{ index }}</li>
    </ul>
    <h5>遍历对象ele为属性值，index为属性名</h5>
    <ul>
      <li v-for="(ele, index) in obj">{{ ele }}---{{ index }}</li>
    </ul>
    <h5>遍历字符串ele为元素，index为下标</h5>
    <ul>
      <li v-for="(ele, index) in str">{{ ele }}---{{ index }}</li>
    </ul>
    <h3>v-model form表单的双向数据绑定</h3>
    <input type="text" v-model="num" />
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      num: 0,
      list: [1, 2, 3, 4, 5],
      obj: { name: "11111", age: 18 },
      str: "我爱你",
    };
  },
  methods: {
    add() {
      this.num++;
    },
  },
};
</script>
<style lang="scss" scoped>
.bluecolor {
  color: blue;
}
.redcolor {
  color: red;
}
.pinkcolor {
  color: pink;
}
</style>