当前位置：网站首页>v-bind指令的详细介绍

v-bind指令的详细介绍

2022-07-28 08:14:00 【探索前端究极秘法的小牛】

前言

在上篇文章 http://t.csdn.cn/YdkSQ
已经介绍了v-bind的指令相关内容了，本篇文章将详细介绍v-bind指令的用法及其应用场景

一，属性绑定

1，v-bind指令的用法

<a v-bind:href='url'>跳转</a>

简写：

<a :href='url'>跳转</a>

注意：在工作的时候一般推荐使用简写方式

代码展示：

当点击默认情况下跳转百度，点击切换地址之后默认地址发生改变，再次点击百度时会跳转到腾讯官网

 <body>
    <div id="app">
        <a v-bind:href="url">百度</a>
        <button v-on:click="change">点击切换地址</button>
    </div>

    <script src="../Vue/vue.js"></script><!-- 引入vue.js文件 -->

    <script>
        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    url: 'http://www.baidu.com'
                }
            },
            methods: {
                //修改URL地址
                change() {
                    this.url = "http://www.qq.com"
                }
            }
        })

    </script>
</body>

效果图

2，v-bind指令利用input事件实现双向绑定

第一种写法

        <input type="text" :value="msg" v-on:input="changes">

第二种写法

        <input type="text" :value="msg" v-on:input="msg=$event.target.value">

第三种写法直接使用v-model指令写

        <input type="text" v-model="msg">

以上三种写法的实现效果都是一样的，前两中写法解释了v-model的基层运行原理

全部代码展示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue/vue.js"></script>
</head>

<body>
    <div id="app">
        <div>{
   {msg}}</div>

        <input type="text" :value="msg" v-on:input="changes">
        <!-- 第二种写法 -->
        <input type="text" :value="msg" v-on:input="msg=$event.target.value">
        <!-- 或者直接用v-model指令也可以实现 -->
        <input type="text" v-model="msg">
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    msg: '你好，李焕英'
                }
            },
            methods: {
                changes: function (event) {
                    //使用输入域中最新的数据覆盖原来的数据
                    this.msg = event.target.value;
                }
            }
        })
    </script>
</body>

</html>

效果图

二，样式绑定

1，class样式绑定

①对象形式

对象一般由键值对组成，我们一般用带is前缀的表示属性 is前缀的用来控制类名是否显示一般情况下is表示一个标记位有两种情况一个是 true另一个是 false

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

多个类名添加

在后面用逗号隔开添加就行

        <div v-bind:class="{ active : isActive,active2:isActive2}"></div>

代码展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script src="../Vue/vue.js"></script>
    <style>
        .active {
            background-color: brown;
            width: 100px;
            height: 100px;
        }
        /* 第二个类名 */
        .active2{
            border: 5px solid black;
            width: 100px;
            height: 100px;

        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 第二个类名在后面用逗号隔开添加就行 -->
        <div v-bind:class="{ active : isActive,active2:isActive2}"></div>
        <button v-on:click="changes">切换</button>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    isActive: true,
                    // isActive的值为true时页面展示class的效果
                    isActive2:true
                }
            },
            methods: {
                changes: function () {
                    // 控制isActive的值在true和false之间来回切换
                    this.isActive = !this.isActive
                    this.isActive2 = !this.isActive2
                }
            }
        })
    </script>
</body>

</html>

效果图

②数组形式

首先需要定义相关的属性名属性的值表示的是实际的类名

如果想要添加多个类名，可以用逗号隔开在后面加

<div v-bind:class="[activeClass,active2Class]"></div>

2，style样式绑定

①对象形式

对象中可以加许多属性

        <div v-bind:style="{border:borderStyle,width:widthStyle,height:heightStyle}"></div>

简写可视模板阅读性强，且美观

        <div v-bind:style="objStyle">简写</div>

全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue/vue.js"></script>
</head>

<body>
    <div id="app">
        <div v-bind:style="{border:borderStyle,width:widthStyle,height:heightStyle}"></div>
        <button v-on:click="changes">切换</button>
        <!-- 简写可视模板阅读性强 -->
        <div v-bind:style="objStyle">简写</div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                borderStyle: '1px solid blue',
                widthStyle: '100px',
                heightStyle: '200px',
// 简写代码块-----------------------------------------
                objStyle: {
                    border: '1px solid blue',
                    width: '300px',
                    height: '300px'
                }
// -------------------------------------------
            }
        },
        methods: {
            changes: function () {
                this.heightStyle = '100px'
            }
        }
    })
</script>

</html>

效果图

②数组形式

通过简写的方法可以放多个属性

<div v-bind:style="[objStyle,overrideStyles]"></div>

全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 对象的语法结构 -->
        <!-- <div v-bind:style="{border:borderStyle,width:widthStyle,height:heightStyle}"></div>
        <button v-on:click="changes">切换</button> -->
        <!-- 简写可视模板阅读性强 -->
        <!-- <div v-bind:style="objStyle">简写</div> -->
        <!-- 数组的语法结构 -->
        <div v-bind:style="[objStyle, overrideStyles]"></div>

    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                // borderStyle: '1px solid blue',
                // widthStyle: '100px',
                // heightStyle: '200px',
                // 简写代码块-----------------------------------------
                objStyle: {
                    border: '1px solid blue',
                    width: '300px',
                    height: '300px'
                },
                // -------------------------------------------
                overrideStyles:{
                    border:'5px solid orange',
                    backgroundColor:'blue'

                }
            }
        },
        methods: {
            changes: function () {
                this.heightStyle = '100px';
                this.objStyle.width = '100px'
            }
        }
    })
</script>

</html>