v-for和v-once的用法及自定义指令

最新推荐文章于 2024-08-19 17:49:54 发布

coodingcc

最新推荐文章于 2024-08-19 17:49:54 发布

阅读量723

点赞数

分类专栏：前端 Vue 文章标签： vue

本文链接：https://blog.csdn.net/cristina_song/article/details/82766334

版权

前端同时被 2 个专栏收录

93 篇文章 1 订阅

订阅专栏

Vue

11 篇文章 1 订阅

订阅专栏

<template>
    <div id="app">
        <h1>Hello Vuex</h1>
       <p>{{aaa}}</p>
       <button @click="add">+</button>
       <button @click="sub">-</button>  
       <ul>
           <li v-for="(item,index) in items">
               {{index}}--{{item.message}}
           </li>
       </ul> 
       <p v-once>原始数据：{{aaa}}</p> 
       <p>修改过的数据：{{aaa}}</p>    
    </div>

</template>

<script>
export default {
    data(){
        return{
            aaa:2,
            items:[
                {message:'first'},
                {message:'second'}
            ]
        }
    },
    methods:{
        add:function(){
            this.aaa++
        },
        sub:function(){
            this.aaa--
        }

    }
}
</script>

自定义指令

<body>
    <div id="app">
      <!-- 自定义指令：自动获得焦点-->
      <input v-focus>
    </div>
</body>
</html>
<script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>
 <script>
 new Vue({
    el: '#app',
    data(){
        return{
          
        }
    },
     directives: {
        focus: {
            // 指令的定义
            inserted: function (el) {
            el.focus()
            }
        }
     }

 })
</script>