zoukankan      html  css  js  c++  java
  • Vue(三)常用指令

    (1) v-model
    双向数据绑定,一般用于表单元素
    <script>
            window.onload=function(){
                new Vue({
                    // el:'.itany',
                    el:'div', //vue2.0中不允许将vue实例挂载到<html>或<body>元素,在vue1.0中是可以的
                    data:{
                        name:'', //即使没有值,也不能省略,报错
                        age:21,
                        flag:true,
                        nums:[12,4,23,5],
                        user:{id:9527,name:'唐伯虎'}
                    }
                });
            }
        </script>

    (2) v-for
    对数组或对象进行循环操作,使用的是v-for,不是v-repeat
    注:在vue1.0中提供了隐式变量,如$index、$key
    在vue2.0中去除了隐式变量,已被废除
    <script>
            window.onload=function(){
                new Vue({
                    el:'#itany',
                    data:{
                        arr:[12,4,5,34,2,11],
                        user:{id:9527,name:'唐伯虎',age:25},
                        arr2:[12,4,5,34,2,11,12],
                        users:[
                            {id:9527,name:'唐伯虎',age:25},
                            {id:1001,name:'秋香',age:22},
                            {id:1002,name:'石榴姐',age:24}
                        ]
                    }
                });
            }
        </script>
    <body>
        <div id="itany">
            <!-- {{arr}} -->
    
            <ul>
                <!-- 普通循环 -->
                <!-- <li v-for="value in arr">{{value}}</li> -->
                <!-- <li v-for="value in user">{{value}}</li> -->
    
                <!-- 键值循环 -->
                <!-- <li v-for="(v,k) in arr">{{k}}={{v}}</li> -->
                <!-- <li v-for="(v,k) in user">{{k}}={{v}}</li> -->
    
                <!-- 可以直接循环包含重复数据的集合,可以通过指定:key属性绑定唯一key,当更新元素时可重用元素,提高效率,类似于vue1.0中track-by -->
                <!-- <li v-for="(v,k) in arr2" :key="k">{{v}}</li> -->
    
                <li v-for="(user,index) in users">
                    {{index+1}},{{user.id}},{{user.name}},{{user.age}}
                </li>
            </ul>
        </div>
    </body>
    (3) v-on
    用来绑定事件,用法:v-on:事件="函数"
    <script>
            window.onload=function(){
                let vm=new Vue({
                    el:'#itany',
                    data:{  //存储数据
                        arr:[12,34,45,23,5]
                    },
                    methods:{ //存储方法
                        show:function(){
                            console.log('show方法');
                        },
                        add(){
                            // console.log(this); //this表示当前vue实例
                            // console.log(this===vm); //true
                            this.arr.push(666); //使用this访问当前实例中的成员
                            // this.show();
                        }
                    }
                });
            }
        </script>
    <body>
        <div id="itany">
            <!-- <button onclick="show()">点我</button> -->
            <button v-on:click="show">点我</button>
            <button v-on:click="add()">向数组中添加一个元素</button>
            <br>
            {{arr}}
            <hr>
            
            <button v-on:mouseover="show">鼠标经过</button>
            <button v-on:dblclick="show">鼠标双击</button>
        </div>
    </body>
    (4) v-show/v-if
    用来显示或隐藏元素,v-show是通过display实现,v-if是每次删除后再重新创建,与angular中类似
    <script>
            window.onload=function(){
                let vm=new Vue({
                    el:'#itany',
                    data:{ 
                        flag:true
                    },
                    methods:{ 
                        change(){
                            this.flag=!this.flag;
                        }
                    }
                });
            }
        </script>
    <body>
        <div id="itany">
            <!-- <button v-on:click="change">隐藏</button> -->
            <button v-on:click="flag=!flag">隐藏</button>
    
            <hr>
            <div style=" 100px;height: 100px; background-color: red" v-if="flag">欢迎来到南京网博</div>
        </div>
    </body>
     
     
     
  • 相关阅读:
    关于JAVA中RSA加签解签,私钥加密公钥解密和公钥加密私钥解密代码详解
    Vue使用总结
    使用ReflectionToStringBuilder实现toString方法
    vue 发送短信验证码倒计时
    个人信息打码
    Token注解防止表单的重复提交
    html选择图片后直接预览
    从分布式一致性谈到CAP理论、BASE理论
    node.js 下依赖Express 实现post 4种方式提交参数
    web前端学习笔记(CSS变化宽度布局)
  • 原文地址:https://www.cnblogs.com/yulingjia/p/7985449.html
Copyright © 2011-2022 走看看