vue3.0 指令 v-xxx

什么是vue指令：

比如Angular中的 ng-xxx。
vue中以 v-xxx 开头人们称它为指令。
在vue中提供了一些对页面 + 数据的更为方便的操作，这些操作就是指令，类似于HTML中的属性。
指令中封装了一些Dom行为，结合属性作为一个暗号，暗号有对应的值，根据不同的值，框架会进行相关的Dom操作的绑定行为。

vue常用的v-指令：

v-text 元素的innerText属性，必须是双标签
v-html 元素的innerHTML
v-if 判断是否插入这个数据，与之配套的是v-else-if 和 v-else 元素必须相邻在一起才会生效，否则报错，v-if值如果是true就在当前插入元素，反之移除，v-if和v-else-if必须有值，v-else直接写。
v-else-if
v-else
v-show 隐藏元素，原理是css中的 display:none boolean类型。

以下代码是指令用法，在元素上使用，接收data函数return的数据。

//1.0
<template>

  <div class="home">
     <span v-text="text"></span>
      <hr/>
      <span v-html="html"></span>
      <hr/>
      <span v-if="ifs=== 1">1</span>
      <span v-else-if="ifs=== 2">2</span>
      <span v-else>3</span>
      <hr/>
      <span v-show="show">display block</span>
  </div>

</template>

<script>

export default {
  name: 'home1',
    data(){

      return{
          text:'<h1>我是v-text</h1>',
          html:'<h1>我是v-html</h1>',
          ifs:1,
          show:true
      }
  }
}

</script>
<style></style>

1.0代码渲染结果

vue3.0 指令 v-xxx

推荐阅读更多精彩内容