Vue 内置指令

 

 

 

示例:

<template>
  <span>
    <div v-cloak v-show="isShow">
      {{msg}}<br>
      {{obj.name}}<br>
      {{f1()}}<br>
      {{num>10?'大于10':'小于10'}}<br>
      <span v-text="msg" v-bind:title="msg" v-on:click="show()">111</span><br>
      <span v-html="msg2" :title="msg2" @click="show()">222</span><br>
    </div>

    <div v-if="type === 'A'"> A </div>
    <div v-else-if="type === 'B'"> B </div>
    <div v-else-if="type === 'C'"> C </div>
    <div v-else> Not A/B/C </div>

    <div v-for="item in items"> {{ item.text }} </div>
    <div v-for="(item, index)  in items"> {{ index + ' ' + item.text }} </div>
    <div v-for="(value, key) in obj">{{value+''+key}}</div>
    <div v-for="(value, key, index) in obj">{{value+''+key+''+index}}</div>

  </span>
</template>

<script>
  export default {
    data() {
      return {
        msg: 'Hello World',
        msg2: '<span>Hello World</span>',
        obj: {
          name: '张三',
          age: 18
        },
        f1: function() {
          return 1 + 1
        },
        num: 15,
        isShow: true,
        type: 'D',
        items: [{
          'text': 'text1'
        },
          {
            'text': 'text2'
          }
        ]

      }
    },
    methods: {
      show() {
        console.log(this.msg)
      }
    }
  }
</script>

　　

 

官方文档: https://cn.vuejs.org/api/built-in-directives.html