vue常用指令

v-for 常用指令

<div id="app">
        <h2 v-for="item in list">{{item}}</h2>
        <h2 v-for="item of obj">{{item}}</h2>
        <h2 v-for="item in obj2" :key="item.id" >{{item.a}}{{item.b}}{{item.c}}</h2>
     </div>
    <script>
         Vue.config.productionTip = false
              const vm = new Vue({
                    el: "#app",
                    data(){
                        return {
                       list:['张散','李四','王五','狗剩'],
                       obj:{
                        name:'关数据',
                        age:18,
                       },
                        obj2:[{
                            id:1,
                        a:'张三',
                        },
                        {
                            id:2,
                        b:'李四',

                       },
                       {
                        id:3,
                       c:'小米',
                       }]
                        }
                    }
                })
    </script>

v-once 常用指令

 <div id="app">
        <h2>{{msg}}</h2>
        <h2 @click.once="change">{{msg}}</h2>
    </div>    
    <script>
         Vue.config.productionTip = false
              const vm = new Vue({
                    el: "#app",
                    data(){
                       return{
                        msg:'我就是我'
                       }
                        },
                        methods: {
                            change(){
                                alert('点击了')
                            }
                        },
                })
    </script>
该指令 只允许点击一次

  v-html 常用指令

<div id="app">
        <h2 v-html="url"></h2>
    </div>
    <script>
         Vue.config.productionTip = false
              const vm = new Vue({
                    el: "#app",
                    data(){
                       return{
                        url:'<a href="http://www.baidu.com/">百度</a>'
                       }
                        }
                })
    </script>
此作用与innerHTML 异曲同工 

v-text 常用指令

<div id="app">
        <h2>{{message}},哈哈哈</h2>
        <h2 v-text="message">哈哈哈</h2>
    </div>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el: "#app",
            data() {
                return {
                 message:'我是你老豆'
                }
            }
        })
    </script> 
此作用与innertext 异曲同工

v-per 常用指令

<div id="app">
        <h2>{{msg}}</h2>
    	<h2 v-pre>{{msg}}</h2>
    </div>
    <script>
         Vue.config.productionTip = false
              const vm = new Vue({
                    el: "#app",
                    data(){
                       return{
                        msg:"我是你老豆"
                       }
                        }
                })
    </script> 
不允许被修改

v-cloak 常用指令

<div id="app" v-cloak>
        <h2>{{msg}}</h2>  
    </div>
    <script>
         Vue.config.productionTip = false
         setTimeout(()=>{
            const vm = new Vue({
                    el: "#app",
                    data(){
                       return{
                        msg:"请选择试"
                       }
                        }
                })
         },200)
     </script>

v-bind 常用指令

<div id="app">
        <img :src="src" />
        <img :src="url" />
    </div>
    <script>
         Vue.config.productionTip = false
              const vm = new Vue({
                    el: "#app",
                    data(){
                       return{
                        src:'https://cn.bing.com/th?id=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1',
                        url:'1.jpg',
                       }
                        }
                })
    </script>