vue基础知识(三)——属性绑定 && 样式绑定

一只没有感情的小杀手

于 2020-05-26 17:03:38 发布

阅读量348

点赞数

分类专栏： Vue基础知识及实战精华文章标签： vue

本文链接：https://blog.csdn.net/qq_40556950/article/details/105557337

版权

本文介绍了Vue中的属性绑定和样式绑定。详细讲解了v-bind指令的使用，以及v-model的底层实现原理，通过三个实例进行了说明。在样式绑定部分，讨论了class样式处理的对象语法和数组语法，以及如何结合使用。还提到了style样式处理的对象和数组语法，并阐述了class绑定中默认样式的处理方式。

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

一. 属性绑定

1. Vue如何动态处理属性
利用 v-bind指令用法或缩写形式进行动态绑定

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

2. v-model的底层实现原理分析

<input v-bind:value="msg" v-on:input="msg=$event.target.value">

三个例子实现效果一致：

<div>msg</div>
 - <input type="text" v-bind:value="msg" v-on:input='handle'>
    handle: function (event) {
      // 使用输入域中的最新的数据覆盖原来的数据
      this.msg = event.target.value
    }
 - <input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value">
 - <input type="text" v-model="msg">