v-bind指令的详细介绍

前言

在上篇文章 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>
 
    <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的基层运行原理

全部代码展示：


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>Documenttitle>
    <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">
        
        <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>

代码展示


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>Documenttitle>
<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>

全部代码


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>Documenttitle>
    <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>

全部代码


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>Documenttitle>
    <script src="../Vue/vue.js">script>
head>
 
<body>
    <div id="app">
        
        
        
        
        
        <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>

相关阅读:
【OpenWrt】N1刷机过程及旁路由设置（通用）
vue项目中常用正则大全
 React 高阶组件和受控组件
 低代码平台选型时，要注意哪些？
Redis的持久化之RDB和AOF
不小心按到键盘上的按键突然这个网没办法进入
 Updating FreeBSD repository catalogue...
windows 2003、2008远程直接关闭远程后设置自动注销会话
 resvr.exe 电脑病毒清理
 基于JAVA小说阅读网站计算机毕业设计源码+系统+mysql数据库+lw文档+部署
原文地址：https://blog.csdn.net/qq_52499703/article/details/126007130