个性化阅读
专注于IT技术分析

VueJS指令v-bind、v-model和其它数据绑定全解

在上一节中,我们学习了VueJS监控属性watch的用法,在本节我们将学习如何使用VueJS中的v-bind将HTML属性和数据进行绑定,包括绑定样式、绑定类以及其它一般的属性绑定,只需使用v-bind指令即可。

1、为什么使用v-bind指令?v-bind的用法

下面我们看一个例子,解释我们为什么需要使用v-bind,以及什么时候使用v-bind指令进行数据绑定。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VueJS使用v-bind进行数据绑定</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="binding">
        {{title}} <br/>
        <a href="hreflink" target="_blank">点击</a> <br/>
        <a href="{{hreflink}}" target="_blank">点击</a> <br/>
        <a v-bind:href="hreflink" target="_blank">点击</a> <br/>
    </div>
    <script>
        var bind = new Vue({
            el: "#binding",
            data: {
                title: "数据绑定",
                hreflink: "http://www.srcmini.com"
            }
        });
    </script>
</body>
</html>

在上面的例子中,有1个标题和3个a链接,其中使用vue实例中对a标签的href属性进行赋值。现在我们在浏览器查看一下这些赋值的结果,前两个a标签没有正确的href链接值,如下图:

VueJS使用v-bind和不使用v-bind的区别

第一个点击链接值为hreflink,第二个为{{hreflink}},第三个显示正确的url值。因而到这里我们可以知道为什么要使用v-bind指令,给HTML属性赋值,我们需要使用v-bind指令,使用的语法如下:

<a v-bind:href="hreflink" target="_blank">点击</a> <br/>

其中VueJS还提供了v-bind指令的简写形式,如下:

<a :href="hreflink" target="_blank">点击</a> 

如果我们在浏览器查看这些v-bind元素,这些html标签不会显示v-bind属性,而是显示纯HTML,对DOM进行分析时,也看不到VueJS属性。

2、使用v-bind绑定样式html类class

为了对象html的类class进行数据绑定,我们需要使用v-bind:class或者使用简写:class,下面我们看一个绑定类calss的例子:

<style>
            .active {
               background: red;
            }
         </style>
         <div id = "bind">
            <div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>
         </div>
         <script type = "text/javascript">
            var bind = new Vue({
               el: '#bind',
               data: {
                  title : "VueJS类绑定",
                  isactive : true
               }
            });
         </script>

在以上的代码中,创建了一个div,其中添加了class属性,使用v-bind进行了绑定,即v-bind:class=”{active: isactive}”。在这里isactive的值为false或true,它的值会应用在div的calss上,在Vue数据对象中,我们将isactive赋值为true。另外,在style中定义了一个.active类,背景设置为红色。

这里进行数据绑定实现的是控制div的class是否使用,如果active为true则显示,否则不显示,下面是在浏览器中的显示效果:

VueJS使用v-bind绑定类class显示效果

在上面的显示中,我们可以看到背景是红色的,也就是calss=”active”被应用到div中了。

下面我们改变isactive的值,更改为false,并查看浏览器中的输出,你可以在下图中看到,div的active类不被使用了:

v-bind使用效果

3、使用v-bind绑定多个类样式

我们也可以给多个div添加calss属性,并使用添加v-bind属性数据绑定,如下例子:

style>
    .info {
    color: #00529B;
    background-color: #BDE5F8;
    }

    div {
    margin: 10px 0;
    padding: 12px;
    }

    .active {
    color: #4F8A10;
    background-color: #DFF2BF;
    }

    .displayError {
    color: #D8000C;
    background-color: #FFBABA;
    }
    </style>
    <div id="bind">
        <div class="info" v-bind:class="{ active: isActive, 'displayError': hasError }">
            {{title}}
        </div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#bind',
            data: {
                title: "VueJS类样式绑定",
                isActive: false,
                hasError: false
            }
        });
    </script>

在上面的代码例子中,我们使用了一个类info,其它类样式会根据isActive和hasError的值进行使用,下面是浏览器的输出:

v-bind绑定多个样式效果

以上的普通的类样式的使用,两个变量isAcitive和hasError的值都为false,现在设置isActive为true,然后查看输出:

v-bind更改样式

在上面的显示中,在DOM中我们可以看到div有两个类了,info和active,下面我们设置hasError为true,将isActive设置为false,查看渲染效果:

v-bind更改样式02

查看上图的输出,info和displayError样式应用在div上了,这就是我们根据条件使用多个类样式的例子。

4、v-bind将类样式作为数组传递

我们还可以将多个类样式作为数组传递,看下面的例子看看是如何实现的:

<style>
        .info {
            color: #00529B;
            background-color: #BDE5F8;
        }

        div {
            margin: 10px 0;
            padding: 12px;
            font-size: 25px;
        }

        .active {
            color: #4F8A10;
            background-color: #DFF2BF;
        }

        .displayError {
            color: #D8000C;
            background-color: #FFBABA;
        }
    </style>
    <div id="bind">
        <div v-bind:class="[infoclass, errorclass]">{{title}}</div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#bind',
            data: {
                title: "VueJS样式绑定例子",
                infoclass: 'info',
                errorclass: 'displayError'
            }
        });
    </script>

浏览器的显示如下:

v-bind将多个样式作为数组传递

在上面的图中,我们可以看到div上有两个类,下面我们使用一个变量,根据变量的值分配类:

<div id="bind">
        <div v-bind:class="[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#bind',
            data: {
                title: "VueJS样式绑定例子",
                infoclass: 'info',
                errorclass: 'displayError',
                isActive: true,
                haserror: false
            }
        });
    </script>

在上面的代码中,增加了两个变量isActive和haserror,并应用到div上,在v-bind:class中使用三目运算符,如下:

<div v-bind:class="[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>

如果isActive为true则使用infoclass,haserror也是类似。上面代码中将isActive设置为true,haserror为false,则会显示infoclass,如下图:

v-bind将多个样式作为数组传递02

将haserro设置为true,isActive设置为false,则显示如下:

v-bind将多个样式作为数组传递03

5、v-bind组件样式绑定

现在,我们将为组件中的类样式添加v-bind,在下面的示例中,我们已经向组件模板和组件添加了一个类。

<style>
    .info {
    color: #00529B;
    background-color: #BDE5F8;
    }

    div {
    margin: 10px 0;
    padding: 12px;
    font-size: 25px;
    }

    .active {
    color: #4F8A10;
    background-color: #DFF2BF;
    }

    .displayError {
    color: #D8000C;
    background-color: #FFBABA;
    }
    </style>
    <div id="bind">
        <new_component class="active"></new_component>
    </div>
    <script type="text/javascript">
        var bind = new Vue({
            el: '#bind',
            data: {
                title: "VueJS样式绑定例子",
                infoclass: 'info',
                errorclass: 'displayError',
                isActive: false,
                haserror: true
            },
            components: {
                'new_component': {
                    template: '<div class = "info">组件样式绑定</div>'
                }
            }
        });
    </script>

下面上面的例子在浏览器中的显示效果,对应的div使用了两个类样式:

v-bind组件样式绑定01

下面是用isActive变量控制组件的样式,代码如下:

<new_component v-bind:class="{active:isActive}"></new_component>

因为该变量为false,因而只会用到info一个类,下面是显示效果

v-bind组件样式绑定显示效果

6、v-bind绑定内联样式

下面使用v-bind绑定内联样式的例子是直接操作每个样式属性值,下面是一般的用法例子:

<div id="bind">
        <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
    </div>
    <script type="text/javascript">
        var bind = new Vue({
            el: '#bind',
            data: {
                title: "绑定内联样式",
                activeColor: 'red',
                fontSize: '30'
            }
        });
    </script>

输出如下:

v-bind绑定内联样式

在上面的例子中,对于div应用每个样式,并从Vue的数据对象中获取数据,这样可以在细节上动态更改每个样式,你可以将所有的样式封装成一个JavaScript对象,将这个对象作为data的成员,这样代码更加清晰干脆了。

7、v-model绑定表单输入

到目前为止,在我们创建的例子中,我们已经看到v-model将输入文本元素和值绑定到指定的变量上,下面看更多关于绑定表单输入的例子。

<div id="bind">
        <h3>绑定表单输入</h3>
        <input v-model="name" placeholder="输入名字" />
        <h3>输入的名字是: {{name}}</h3>
        <hr />
        <h3>Textarea</h3>
        <textarea v-model="message" placeholder="添加详情"></textarea>
        <h1>
            <p>{{message}}</p>
        </h1>
        <hr />
        <h3>复选框</h3>
        <input type="checkbox" id="checkbox" v-model="checked"> {{checked}}
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#bind',
            data: {
                name: '',
                message: '',
                checked: false
            }
        });
    </script>

我们在文本框中输入的内容如下所示,v-model输入框和name绑定,名称显示在{{name}}中,{{name}}显示在文本框中输入的任何内容。

v-model绑定表单输入

8、单选框和select下拉列表数据绑定

<div id="bind">
        <h3>单选框</h3>
        <input type="radio" id="black" value="黑色" v-model="picked">黑色
        <input type="radio" id="white" value="白色" v-model="picked">白色
        <h3>单选框选择: {{picked}} </h3>
        <hr />
        <h3>下拉select选择框</h3>
        <select v-model="languages">
            <option disabled value="">请选择一项</option>
            <option>Java</option>
            <option>Javascript</option>
            <option>Php</option>
            <option>C</option>
            <option>C++</option>
        </select>
        <h3>选择的语言是: {{ languages }}</h3>
        <hr />
    </div>
    <script type="text/javascript">
        var bind = new Vue({
            el: '#bind',
            data: {
                picked: '白色',
                languages: "Java"
            }
        });
    </script>
单选框和select下拉菜单数据绑定

9、修饰符绑定

我们在下面的示例中使用了三个修饰词——trim、number和lazy。

<div id="bind">
        <span style="font-size:25px;">输入年龄: </span> <input v-model.number="age" type="number">
        <br />
        <span style="font-size:25px;">输入信息: </span> <input v-model.lazy="msg">
        <h3>显示信息: {{msg}}</h3>
        <br />
        <span style="font-size:25px;">输入信息: </span><input v-model.trim="message">
        <h3>显示信息: {{message}}</h3>
    </div>
    <script type="text/javascript">
        var bind = new Vue({
            el: '#bind',
            data: {
                age: 0,
                msg: '',
                message: ''
            }
        });
    </script>
trim、number和lazy绑定使用

number修饰符:只允许输入数字,除此以外它将不允许任何其他输入。

lazy修饰符:lazy修饰符等到用户将焦点移开输入框后才显示。

trim修饰符:删除输入内容开头和结尾的所有空格

赞(0) 打赏
未经允许不得转载:srcmini » VueJS指令v-bind、v-model和其它数据绑定全解
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏