Vue 内置指令

 

 

 

示例:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

<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