3 — v-bind 绑定属性

最新推荐文章于 2024-06-06 10:14:42 发布

By-Q

最新推荐文章于 2024-06-06 10:14:42 发布

阅读量521

点赞数

分类专栏： Vue框架文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_44599604/article/details/122311253

版权

Vue框架专栏收录该内容

4 篇文章 0 订阅

订阅专栏

v-bind绑定src和href

    <div id="test">
        <a v-bind:href="url">By_Q主页</a>
        <img v-bind:src="image" alt="图片">
    </div>

    <script src="../vue/vue.js"></script>
    <script>
        const test = new Vue({
            el:'#test',
            data : {
                url : 'https://blog.csdn.net/weixin_44599604?spm=1010.2135.3001.5343',
                image : 'https://avatar.csdnimg.cn/A/7/D/1_weixin_44599604_1641256807.jpg'
            }
        })
    </script>

v-bind语法糖

可以简化为“ ：”（冒号）

下面两段代码是等效的

<a v-bind:href="url">By_Q主页</a>
<img v-bind:src="image" alt="图片">

<a :href="url">By_Q主页</a>
<img :src="image" alt="图片">

v-bind绑定属性常用的是对象的绑定：

对象：{类名：值，key：value}

设计一个列表，鼠标点击就是变红：

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

    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
    <div id="test">

        <ul>
            <li :class="active_index == index ? getclass() : '' " v-for="(item,index) in message" @click="Change_active(index)">{{index}} {{item}}</li>
        </ul>
    </div>

    <script src="../vue/vue.js"></script>
    <script>
        const test = new Vue({
            el:'#test',
            data:{
                active_index : 0,
                message:['text1','text2','text3'],
                IsActive:true
            },
            methods:{
                Change_active: function(index){

                    this.active_index = index
                },
                getclass:function(){
                    return {'active': this.IsActive}
                }
            }

        })
    </script>
</body>
</html>

绑定样式

需要注意的是，绑定样式的key必须是css代码的样式

 <p :style="{color:current_color,fontSize:size}">绑定样式</p>
....

const test = new Vue({
            el:'#test',
            data:{
                active_index : 0,
                message:['text1','text2','text3'],
                IsActive:true,
                current_color : 'red',
                size:'20px'
            },