Vue入门学习笔记：TodoList（四）：属性绑定和双向数据绑定

最新推荐文章于 2024-04-23 09:40:10 发布

原创最新推荐文章于 2024-04-23 09:40:10 发布 · 536 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 专栏收录该内容

14 篇文章

订阅专栏

这篇系列博客详细介绍了使用Vue.js创建TodoList应用的过程，涵盖从HelloWorld开始，逐步讲解了挂载点、模板、实例、数据绑定、事件处理、计算属性、侦听器、条件和循环指令，以及组件的使用。通过实践，读者将深入理解Vue的特性和用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录：
Vue入门学习笔记：TodoList（一）：HelloWorld
Vue入门学习笔记：TodoList（二）：挂载点、模板、实例
 Vue入门学习笔记：TodoList（三）：实例中的数据、事件和方法
 Vue入门学习笔记：TodoList（四）：属性绑定和双向数据绑定
 Vue入门学习笔记：TodoList（五）：计算属性和侦听器
 Vue入门学习笔记：TodoList（六）：v-if, v-show, v-for指令
 Vue入门学习笔记：TodoList（七）：todolist功能开发
 Vue入门学习笔记：TodoList（八）：todolist组件拆分
 Vue入门学习笔记：TodoList（九）：组件与实例的关系
 Vue入门学习笔记：TodoList（十）：实现todolist的删除功能
 Vue入门学习笔记：TodoList（十一）：vue-cli的简介与使用
 Vue入门学习笔记：TodoList（十二）：使用vue-cli开发todolist
Vue入门学习笔记：TodoList（十三）：全局样式与局部样式

知识点：
1.使用v-bind（即:）进行属性绑定
2.使用v-model进行双向数据绑定

属性绑定

title是一个鼠标悬停显示的提示语属性
可以使用v-bind模板指令实现属性的绑定，从而实现Vue对象中data的数据绑定
模板表达式等号后面的双引号里面的内容其实是js表达式
语法糖：v-bind: 等价于 :
示例1：字符串拼接显示title

<body>
    <div id = "root">
        <div v-bind:title = "'xxx'+str">
            hello world
        </div>
    </div>

    <script>
        new Vue(
            {
                el : "#root",
                data : {
                    str: "yyy"
                },
            }
        )
    </script>
</body>

效果如下：

双向数据绑定

单向绑定 – 数据决定页面的显示，页面无法改变数据

v-model 模板指令可以实现双向绑定

<body>
    <div id = "root">
        <div :title = "'xxx'+str">hello world</div>
        <input v-model = "strCopy">
        <div>{{strCopy}}</div>
        <input v-model = "strCopy">
    </div>

    <script>
        new Vue(
            {
                el : "#root",
                data : {
                    str: "yyy",
                    strCopy: "123"
                },
            }
        )
    </script>
</body>