Vue

02-Vue常用指令(一)

2018-08-28  本文已影响0人  乔乔_老师

一、什么是指令

用来扩张html标签的功能

vue常用指令
1.v-model
<div id='itany'>
        <input type="text" name="" v-model='msg'>
        <p>{{msg}}</p>
    </div>  
<script src='js/vue.js'></script>
<script type="text/javascript">
    new Vue({
        el:"#itany",
        data:{
            msg:''
        }
        
    })
</script>

我们把msg绑定到input元素上，同时p标签里也要现实msg.打开页面我们发现当向input中输入内容时，p标签中的值会随着input中的内容变化，这就是一个最简单的双向数据绑定

2.v-for:对数组或对象进行循环操作
<div id='itany'>
        <ul>
            <li v-for='val in fruit'>{{val}}</li>
        </ul>
    </div>  
<script src='js/vue.js'></script>
<script type="text/javascript">
    new Vue({
        el:"#itany",
        data:{
            fruit:['香蕉','苹果','鸭梨']
        }
        
    })
</script>

现在要把fruit数组中的水果现实在li中，所以就要循环li, 所以li标签中要用v-for="val in fruit"
注:val不是固定值，可以自己写，li标签之间显示的就是val值

如果我们也想显示数组中元素的下标,只需要将html改成如下即可

<div id='itany'>
   <ul>
    <li v-for='(val,index) in fruit'>{{index}}=>{{val}}</li>
    </ul>
</div>

index就代表元素的下标，当然index也不是固定值，也是可以自己写的

2.1循环对象也是同理的
<div id='itany'>
        <ul>
            <li v-for='(val,ind) in user'>{{ind}}=>{{val}}</li>
        </ul>
</div>  
<script src='js/vue.js'></script>
<script type="text/javascript">
    new Vue({
        el:"#itany",
        data:{
            user:{id:'001',name:'jack',age:'18'}
        }
        
    })
</script>
2.2循环数组对象
<div id='itany'>
        <ul>
            <li v-for='(val,ind) in fruit'>
              {{val.id}}
              {{val.name}}
              {{val.price}}
           </li>
        </ul>
    </div>  
<script src='js/vue.js'></script>
<script type="text/javascript">
    new Vue({
        el:"#itany",
        data:{
            fruit:[
               {id:'001',name:'香蕉',price:'1'},
               {id:'002',name:'苹果',price:'2'},
               {id:'003',name:'鸭梨',price:'3'}
            ]
        }
        
    })
</script>

注：循环数组对象时,val指的是数组中的每个对象访问对象中的属性值要用.（点），对象.属性名

3.v-on:事件绑定
<div id='itany'>
        <ul>
            <button v-on:click='alt'>按钮</button>
        </ul>
</div>  
<script src='js/vue.js'></script>
<script type="text/javascript">
    new Vue({
        el:"#itany",
        data:{
            fruit:[
               {id:'001',name:'香蕉',price:'1'},
               {id:'002',name:'苹果',price:'2'},
               {id:'003',name:'鸭梨',price:'3'}
            ]
        },
        methods:{
            alt:function(){
                alert('v-on事件绑定')
            }
        }
    })
4案例1：完成如下图所示的案例
1.png

点击按钮把input中的内容添加到下面的水果列表中
代码如下

<body>
    <div id='itany'>
        <input type="text" name="" v-model='fruit'>
        <button v-on:click='add'>添加水果</button>
        <ul>
            <li v-for='val in fruitList'>{{val}}</li>
        </ul>
    </div>  
<script src='js/vue.js'></script>
<script type="text/javascript">
    new Vue({
        el:"#itany",
        data:{
            fruitList:['香蕉','苹果','鸭梨'],
            fruit:''

        },
        methods:{
            add:function(){
                this.fruitList.push(this.fruit);//向列表中插入值
                //注：访问vue实例中的数据要用this
                this.fruit='';//清空input
            }
        }
    })
</script>
</body>

注:
1. 原生js中向数组中添加元素要用push,在vue中同样要用push
2.vue实例中的方法要访问对象实例中的数据要用this

4.1案例2：完成如下图所示的案例
2.png

在每个水果后面添加一个删除按钮，点击删除就可以把当前的删除，点击添加就可以添加水果

<body>
    <div id='itany'>
        <input type="text" name="" v-model='fruit'>
        <button v-on:click='add'>添加水果</button>
        <ul>
            <li v-for='val in fruitList'>
                {{val}} 
                <button v-on:click='delt(index)'>删除</button>
            </li>
        </ul>
    </div>  
<script src='js/vue.js'></script>
<script type="text/javascript">
    new Vue({
        el:"#itany",
        data:{
            fruitList:['香蕉','苹果','鸭梨'],
            fruit:''

        },
        methods:{
            add:function(){
                this.fruitList.push(this.fruit);//向列表中插入值
                //注：访问vue实例中的数据要用this
                this.fruit='';//清空input
            },
            delt:function(index){
                this.fruitList.splice(index,1);
            }
        }
    })
</script>
</body>

注：删除的时候要传一个index,这样就可以实现点击哪个删除哪个，如果不想穿index,那就要把splice()中的index换成this就可以了

5.v-show/v-if

使用v-show/v-if完成如下效果图


3.png

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        p{
            width:100px;
            height:100px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div id='itany'>
        <button v-on:click='hide'>点击按钮隐藏</button>
        <button v-on:click='shows'>点击按钮显示</button>
        <button v-on:click='toggle'>点击按钮隐藏显示来回切换</button>
        <p v-show='flag'>欢迎光临</p>
    </div>  
<script src='js/vue.js'></script>
<script type="text/javascript">
    new Vue({
        el:"#itany",
        data:{
            flag:true,
        },
        methods:{
            hide:function(){
                this.flag=false;//点击隐藏
            },
            shows:function(){
                this.flag=true;//点击显示
            },
            toggle:function(){//点击隐藏或显示
                if(this.flag){
                    this.flag=false;
                }else{
                    this.flag=true;
                }
            }
        }
    })
</script>
</body>
</html>

v-show/v-if都可以控制元素的显示和隐藏，但是方式不一样，v-show使用的是display:none来控制的，v-if使用的是visibility:hidden来控制的

练习：

结合bootstrap完成如下效果

xx.png
点击添加按钮可以把输入矿中的内容添加到table中，点击每行的删除也可以当前行删除掉

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div id='itany' class='container'>
    <form>
        <div class='form-group'>
            <label>用户名</label>
            <input type="text" class='form-control' placeholder="请输入用户名" v-model='info.uname'>
        </div>
        <div class='form-group'>
            <label>年龄</label>
            <input type="text" class='form-control' placeholder="请输入年龄" v-model='info.age'>
        </div>
        <div class='form-group'>
            <label>邮箱</label>
            <input type="text" class='form-control' placeholder="请输入邮箱" v-model='info.email'>
        </div>
        <div class='form-group text-center'>
            <input type="button" name="" class='btn btn-success' value='添加' v-on:click='add'>
            <input type="button" name="" class='btn btn-info' value='重置'>
        </div>
    </form>
    <table class='table table-bordered text-center'>
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for='(value,index) in user'>
                <td>{{index+1}}</td>
                <td>{{value.uname}}</td>
                <td>{{value.age}}</td>
                <td>{{value.email}}</td>
                <td><button v-on:click='delet'>删除</button></td>
            </tr>
        </tbody>
    </table>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
    new Vue({
        el:'#itany',
        data:{
            user:[
                   {uname:'jack',age:18,email:'123@126.com'},
                   {uname:'rose',age:19,email:'456@126.com'},
                   {uname:'jhon',age:20,email:'789@126.com'}
                ],
            info:{}
        },
        methods:{
            add:function(){
                this.user.push(this.info);
            },
            delet:function(){
                this.user.splice(this,1);
            }
        }
    })
</script>
</body>
</html>
上一篇下一篇

猜你喜欢

热点阅读