Vue中部分方法的使用

目录

一、tab切换，标签页的方法

1、第一步：引入Vue.js

2、第二步：创建数据

3、第三步：遍历数组

4、第四步：给标题绑定单击事件

5、第五步：执行单击事件

6、

二、Vue过滤器

全局过滤器：

私有过滤器：

三、键盘修饰符

四、自定义指令

全局定义：Vue.directive()

1.指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）

2. 对象，里面包含三个钩子方法

3.这三个方法的参数有哪些 

私有定义：

五、补零方法

---

一、tab切换，标签页的方法

1、第一步：引入Vue.js

<script src="./vue-2.4.0.js"></script>

2、第二步：创建数据

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            cur:0,
            list:[
                {id:1,title:'标题1',content:"内容1"},
                {id:2,title:'标题2',content:"内容2"},
                {id:3,title:'标题3',content:"内容3"},
            ]
        },
        methods: {
        },
    })
</script>

3、第三步：遍历数组

<div id='app'>
        <ul>
            <li v-for="(item,index) in list"> {
  {item.title}}</li>
        </ul>
 
        <ul>
            <li v-for="(item,index) in list">{
  {item.content}}</li>
        </ul>
 </div>

4、第四步：给标题绑定单击事件

<li v-for="(item,index) in list" @click="changeIndex(index)" > {
  {item.title}}</li>

5、第五步：执行单击事件

changeIndex(index){