本篇主要学习Vue中绑定属性、条件渲染、循环以及事件绑定

绑定属性

tilte
当要给一个元素(例如h1)绑定一个动态更新的title时,可使用v-bind:title(或:title简写),举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定属性</title>
    <script type="text/javascript" src=js/vue.js></script>
</head>
<body>
    <!--View-->
    <div id="app">
        <!--可使用简写:title-->
        <h1 v-bind:title="Vtitle">我的title是:{{Vtitle}}</h1>
    </div>
    <script>
        //Model
        var ModelData={
            Vtitle:"我是一个title"
        }
        //ViewModel或Vue实例
        var app=new Vue({
            el:"#app",
            data:ModelData
        })
    </script>
</body>
</html>

class
绑定class样式(v-bind:class)时,可以设定boolean值来动态判断是否使用该样式:举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定属性</title>
    <script type="text/javascript" src=js/vue.js></script>
</head>
<style>
    .myColor{
        font-family: "微软雅黑";
        color: greenyellow;
    }
</style>
<body>
    <!--View-->
    <div id="app">
        <div v-bind:class="{myColor:isShow}">我有一个动态绑定的样式myColor,仅当isShow为true时才展示,当前isShow为{{isShow}}</div>
    </div>
    <script>
        //Model
        var ModelData={
            isShow:true
        }
        //ViewModel或Vue实例
        var app=new Vue({
            el:"#app",
            data:ModelData
        })
    </script>
</body>
</html>

内联样式
绑定内联样式(v-bind:style)时,样式的属性值需要我们在Model中提前定义,举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定属性</title>
    <script type="text/javascript" src=js/vue.js></script>
</head>
<style>
</style>
<body>
    <!--View-->
    <div id="app">
        <h2 v-bind:style="{color:Modelcolor,fontSize:fz+'px'}">我是内联样式</h2>
    </div>
    <script>
        //Model
        var ModelData={
            Modelcolor:"red",
            fz:60
        }
        //ViewModel或Vue实例
        var app=new Vue({
            el:"#app",
            data:ModelData
        })
    </script>
</body>
</html>

样式对象
我们也可以提前在Model中定义一个样式对象,然后直接绑定样式对象。举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定属性</title>
    <script type="text/javascript" src=js/vue.js></script>
</head>
<style>
</style>
<body>
    <!--View-->
    <div id="app">
        <!--样式对象绑定-->
        <h3 v-bind:style='styleObject'>
        我是样式对象</h3>
    </div>
    <script>
        //Model
        var ModelData={
            //样式对象定义
            styleObject:{
                color:"pink",
                fontSize:"20px"
            }
        }
        //ViewModel或Vue实例
        var app=new Vue({
            el:"#app",
            data:ModelData
        })
    </script>
</body>
</html>

条件渲染

Vue可以使用v-if、v-else、v-else-if来实现逻辑判断渲染,也可以使用v-show来实现,v-if和v-show的区别下面会进行讲解,先来举例前三个:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script type="text/javascript" src=js/vue.js></script>
</head>
<style>
</style>
<body>
    <!--View-->
    <div id="app">
        <!--条件渲染-->
        <!--V-if可使用JavaScript语言嵌套-->
        <h4 V-if="Math.random()*10>5">我在随机数大于5时显示</h4>
        <h4 V-else-if="Math.random()*10<5">我在随机数小于5时显示</h4>
        <h4 V-else>我在随机数等于5时显示</h4>
        <h4 v-show="isShow">当isShow为true时我会显示,当前isShow为{{isShow}}</h4>
    </div>
    <script>
        //Model
        var ModelData={
            isShow:false
        }
        //ViewModel或Vue实例
        var app=new Vue({
            el:"#app",
            data:ModelData
        })
    </script>
</body>
</html>

v-if和v-show的区别是当条件不成立时,使用v-if的标签不会存在于文档中,v-show的标签会存在于文档中,但用用display:none属性

循环

Vue中可使用v-for来实现循环渲染,便于处理后端传来的数据,此处举例的数据已进行预定义,正是开发环境中应该来源于后端传递。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环</title>
    <script type="text/javascript" src=js/vue.js></script>
</head>
<style>
</style>
<body>
    <!--View-->
    <div id="app">
        <!--循环渲染-->
        <div v-for="(item,key,index) in Array">
            <p><span>第{{index+1}}个</span><span>{{key}}==></span></p>
            <span v-for="(ite,k) in item">
                <span>{{k}}=>{{ite}}</span>
            </span>
        </div>
    </div>
    <script>
        //Model
        var ModelData={
            Array:{
                user:{
                    name:"凉菜",
                    age:14,
                    sex:"男"
                },
                fruit1:{
                    name:"苹果",
                    price:12,
                },
                fruit2:{
                    name:"香蕉",
                    price:6,
                }
            }
        }
        //ViewModel或Vue实例
        var app=new Vue({
            el:"#app",
            data:ModelData
        })
    </script>
</body>
</html>

事件绑定

Vue中事件绑定使用的是v-on:click(简写@click),举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script type="text/javascript" src=js/vue.js></script>
</head>
<style>
</style>
<body>
    <!--View-->
    <div id="app">
        <!--事件绑定v-on:click或@ckick-->
        <div>喜欢人数{{count}}</div>
        <button @click="countAdd">点赞</button>
        <button v-on:click="countAdd">点赞</button>
    </div>
    <script>
        //Model
        var ModelData={
            count:0
        }
        //ViewModel或Vue实例
        var app=new Vue({
            el:"#app",
            data:ModelData,
            methods:{
                countAdd:function(){
                this.count+=1;
                }
            }
        })
    </script>
</body>
</html>

附:事件阻止
某些标签拥有默认事件(如 a、form),这时就需要进行事件阻止。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定属性</title>
    <script type="text/javascript" src=js/vue.js></script>
</head>
<style>
</style>
<body>
    <!--View-->
    <div id="app">
        <!--事件阻止-->
        <a href="//baidu.com" v-on:click.stop.prevent="stop">点我跳转</a>
    </div>
    <script>
        //Model
        var ModelData={
            count:0
        }
        //ViewModel或Vue实例
        var app=new Vue({
            el:"#app",
            data:ModelData,
            methods:{
                stop:function(){
                alert("本来点击我该跳转http://baidu.com的,但是现在被阻止了")
                }
            }
        })
    </script>
</body>
</html>

事件阻止可选项一览表:

属性介绍举例
stop阻止单击事件冒泡<a v-on:click.stop="doThis"></a>
prevent提交事件不再重载页面<form v-on:submit.prevent="doThat></form>
stop.prevent修饰符可以串联<a v-on:click.stop.prevent="doThis"></a>
prevent只有修饰符<a v-on:click.prevent></a>
capture添加事件侦听器时使用事件捕获模式<a v-on:click.stop.prevent="doThis"></a>
self只当事件在该元素本身(不是子元素) 触发时触发回调<a v-on:click.self="doThis"></a>
Last modification:July 30th, 2019 at 05:23 pm
如果觉得我的文章对你有用,请随意赞赏