Vue第三课双向数据流动及事件绑定

最新推荐文章于 2024-05-16 17:34:07 发布

qq_43538170

最新推荐文章于 2024-05-16 17:34:07 发布

阅读量219

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_43538170/article/details/112342579

版权

本文详细介绍了Vue的双向数据绑定机制v-model，它适用于有value属性的元素，实现页面与内存同步更新。同时，讲解了v-bind单向数据绑定，仅允许内存中的值改变影响页面。此外，还探讨了事件绑定v-on(@)用于响应各种事件。通过实例代码，深入理解这些概念。

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

1.vue单向数据流绑定属性值 v-bind: (属性) 简写 :(属性)

例子： <input v-bind:value="name" v-bind:class="name">

单向数据绑定，内存改变影响页面改变

v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染
2. vue双向数据流 v-model 只作用于有value属性的元素

例子： <input v-model="name" v-bind:class="name">

双向数据绑定页面对于input的value改变，能影响内存中name变量

内存js改变name的值，会影响页面重新渲染最新值

3.事件绑定v-on:事件名=“表达式||函数名” 简写 @事件名=“表达式||函数名”

事件名可以是原生也可以是自定义的

4.总结 v-model 双向数据绑定

例式代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=

关注