v-bind指令的详细介绍

最好的人啊

已于 2022-07-27 17:11:48 修改

阅读量685

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-07-27 17:11:46 首次发布

本文链接：https://blog.csdn.net/qq_52499703/article/details/126007130

版权

本文详细介绍了Vue中的v-bind指令，包括属性绑定和样式绑定。在属性绑定部分，阐述了v-bind指令的用法及其简写形式，并通过实例展示了如何利用input事件实现双向绑定。样式绑定部分分别探讨了class和style的绑定，涵盖对象形式和数组形式的使用，通过实例代码解释了其应用方式和效果。

摘要由CSDN通过智能技术生成

前言

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

全部代码展示ÿ

最低0.47元/天解锁文章

最好的人啊

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录