Vue中数据绑定v-bind与v-model

最新推荐文章于 2024-06-02 11:07:16 发布

丹&d

最新推荐文章于 2024-06-02 11:07:16 发布

阅读量2.6k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/sdrfsef/article/details/124750246

版权

1.v-bind单向绑定

vibind 可以用来动态地绑定一个标签的属性

语法 : v-bind : 标签属性

简写 : 标签属性

1.1 常用属性绑定

<div id="app">

   <a v-bind:href="url">跳转到百度</a>
<!--    简写方式-->
 <a :href="url">跳转到百度</a>
</div>

<script>

    new Vue({
        el:"#app",
        data:{
            url:"http://www.baidu.com"
        }
    });

</script>

1.2 class绑定

v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

1. 字符串写法


<body>
<style>
    .basic {
        width: 400px;
        height: 400px;
        border: 1px solid #ccc;
    }
    .bgc {
        background-color: pink;
    }
</style>
<div id="app">
    <div class="basic" :class="className">文本内容</div>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            className: 'bgc'
        }
    });

</script>
</body>

2. 数组写法

以下案例同时添加了两个类名

<body>
<style>
    .basic {
        width: 400px;
        height: 400px;
        border: 1px solid #ccc;
    }
    .bgc {
        background-color: pink;
    }
    .txt{
        line-height: 400px;
        font-size: 20px;
        text-align: center;
    }
</style>
<div

最低0.47元/天解锁文章

丹&d

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue中数据绑定v-bind与v-model

目录1.v-bind单向绑定1.1常用属性绑定1.2 class绑定1.3 style绑定2.v-model双向绑定2.1普通表单元素绑定2.2特殊表单元素绑定1.v-bind单向绑定vibind可以用来动态地绑定一个标签的属性语法 :v-bind :标签属性简写 :标签属性1.1常用属性绑定<div id="app"> <a v-bind:href="url">跳转到百度</a>&lt...
复制链接

扫一扫