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>

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值