v-bind指令

fushan2012

已于 2022-02-22 16:04:53 修改

阅读量587

点赞数

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

于 2022-02-22 15:29:59 首次发布

本文链接：https://blog.csdn.net/fushan2012/article/details/123069224

版权

Vue.js 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue.js中的v-bind指令，用于将Vue实例的数据绑定到元素属性。v-bind支持JavaScript表达式，并提供了简写形式。通过示例展示了如何绑定标题、图片源、类名和事件处理，包括动态切换类名的方法。

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

1、Vue.js v-bind指令

Vue v-bind 指令用于绑定属性，即把被绑定的属性中的值当做 Vue 实例中的变量解析。
Vue v-bind 指令还可以支持 JavaScript 表达式。
Vue v-bind 指令的简写形式为 :属性值。

用于属性绑定，Vue官方提供了一个简写方式 :bind，

<!-- 完整语法 -->

<a v-bind:href="url"></a>
<!-- 缩写 -->

<a :href="url"></a>

2、用法示例

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

<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>v-bind指令</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="button" value="按钮" v-bind:title="mytitle + '123'" @click="show">
        <br>
        <img v-bind:src="imgSrc" alt="" width="50px" height="50px">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive" width="50px" height="50px">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive" width="50px" height="50px">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"https://v3.cn.vuejs.org/logo.png",
                imgTitle:"v-bind指令测试",
                isActive:false,
                mytitle: '这是一个自己定义的title'
            },
            methods: {
                toggleActive:function(){
                    this.isActive = !this.isActive;
                },
                show:function(){
                    alert("hello");
                } 
            },
        })
    </script>
</body>

</html>