Vue中的v-bind

最新推荐文章于 2024-08-09 15:57:23 发布

wyf.world

最新推荐文章于 2024-08-09 15:57:23 发布

阅读量408

点赞数 1

本文链接：https://blog.csdn.net/weitunfei/article/details/124718470

版权

Vue.js v-bind 属性绑定动态数据 CSS样式

关键词由CSDN通过智能技术生成

有时候属性需要根据某些变量某些数据动态来决定,所以要使用v-bind。

v-bind：负责渲染数据到属性中【更改属性值】

1.v-bind更改属性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/vue.min.js"></script>
</head>
<body>


<div id="app">

    <input type="text" :value="message">

</div>

<script>


    new Vue({
        el:"#app",
        data:{
            message:"属性值"
        }
    });

</script>

</body>
</html>

结果：

2.通过v-bind更改属性值为对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./vue.min.js"></script>

    <style>

        .red{
            color: red;
        }

        .green{
            color: green;
        }

    </style>
</head>
<body>


<div id="app">

    <h1 :class="{red:className,green:!className}">我是什么颜色？</h1>
    <button @click="className = false">更改为绿色</button>
    <button @click="className = true">更改为红色</button>

</div>

<script>

    new Vue({
        el:"#app",
        data:{
            className:true
        }
    });

</script>

</body>
</html>

结果：