v-bind

最新推荐文章于 2024-10-27 11:25:22 发布

NAIYAnana

最新推荐文章于 2024-10-27 11:25:22 发布

阅读量104

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/NAIYAnana/article/details/124718632

版权

Vue.js v-bind 属性绑定条件样式数据渲染

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

插值表达式、v-text、v-html这些都是渲染数据，而且数据是渲染到标签体中的，但是如果想要渲染到属性中【更改属性值】，这些表达式和指令解决不了

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

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


<div id="app">

    <input type="text" v-bind:value="message">
<!--    简写方式-->
    <input type="text" :value="message">

</div>

<script>


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

</script>

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../public/js/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>