vue常用指令

vue常用指令

v-once

只会执行一次渲染，当数据发生改变时，不会再变化

<div id="app">
    {{message}}
  <h2 v-once>{{message}}</h2>
</div>
<script src="../JS/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

v-html

v-html 渲染字符串，覆盖原有的字符串

<div id="app">
    {{message}}
  <h2 v-html="url"></h2>
</div>
<script src="../JS/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      url: '<a href="https://blog.csdn.net/xiaohua616">点一下</a>'
    }
  })
</script>

v-text

v-text 是渲染html，Mustache 语法（{{}}双大括号）和v-text都是输出文本

<div id="app">
    {{message}}
  <h2 v-text="message"></h2>
</div>
<script src="../JS/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

v-bind

v-bind 动态绑定数据

<div id="app">
<!-- v-bind: 简写:-->
    <a :href="ImagUrl">点一下</a>
</div>
<script src="../JS/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      ImagUrl: 'https://blog.csdn.net/xiaohua616'
    }
  })
</script>

v-if

v-if 当条件false时,包含v-if指令元素,不会存在dom中

<div id="app">
  <h2 v-if="isShow">{{message}}</h2>
</div>
<script src="../JS/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isShow: true
    }
  })
</script>

v-if和v-else

v-if和v-else 接收一个条件或布尔值

<div id="app">
  <h2 v-if="isShow">{{message}}</h2>
  <h1 v-else>isShow为false显示我</h1>
</div>
<script src="../JS/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isShow: false
    }
  })
</script>

v-show

v-show 使用display属性来控制显示隐藏

<div id="app">
<!--
  v-if：当条件false时,包含v-if指令元素,不会存在dom中
 -->
  <h2 v-if="isShow" id="aaa">{{message}}</h2>

<!-- v-show: 条件false时,包含v-show指令元素,改变css样式-->
  <h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>
<script src="../JS/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isShow: true
    }
  })
</script>

v-for

v-for 用来遍历数组、对象、字符串

<div id="app">
<!-- 在遍历对象过程中,如果只是获取一个值,只获取的是value -->
  <ul>
    <li v-for="item in info">{{item}}</li>
  </ul>

  <!-- 在遍历对象过程中,如果只是获取一个值,只获取的是key和value -->
  <ul>
    <li v-for="(value,key) in info">{{value}}-{{key}}</li>
  </ul>

  <!-- 在遍历对象过程中,如果只是获取一个值,只获取的是key和value和下标 -->
  <ul>
    <li v-for="(index,value,key) in info">{{index}}-{{value}}-{{key}}</li>
  </ul>
</div>
<script src="../JS/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      info: {
        name: 'xh',
        age: 19,
        height: 1.88
      }
    }
  })
</script>

v-model

v-model 数据双向绑定，在input中使用案例

<div id="app">
  <input type="text" v-model="message">
  <h2>{{message}}</h2>
</div>
<script src="../JS/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>