vue.js声明式渲染和条件与循环基础知识
发布时间：2020-12-17 02:51:17 所属栏目：百科 来源：网络整理
导读：vue.js声明式渲染和条件与循环的具体内容，分享给大家 绑定 DOM 元素文本值 html代码： JavaScript代码： 运行结果：Hello Vue! 总结： 数据和 DOM 已经被关联在一起，当我们改变app.message的数据，所渲染的的DOM元素会相应地更新。 绑定 DOM 元素属性 用v-
|
vue.js声明式渲染和条件与循环的具体内容，分享给大家 绑定 DOM 元素文本值html代码： JavaScript代码： 运行结果：Hello Vue! 总结：数据和 DOM 已经被关联在一起，当我们改变app.message的数据，所渲染的的DOM元素会相应地更新。绑定 DOM 元素属性用v-bind指令绑定span元素的title属性 html代码： JavaScript代码： 运行结果： 总结：v-bind 属性被称为指令，是由 Vue 提供的专用属性，该指令的作用就是：“将此元素的 title 属性与 Vue 实例的 message 属性保持关联更新”。当我们改变app2.message的值时，绑定了title属性的元素会进行更新。条件用v-if指令判断条件 html代码： JavaScript代码： 运行结果：你可以看到我 总结：当我们把app3.seen的值改为false以后，我们会看到 span 消失。说明我们不只是可以将数据绑定到文本和属性，也可以将数据绑定到 DOM 结构。从而通过数据的更改实现元素的插入/更新/删除操作。循环 v-for 指令，可以使用数组中的数据来展示一个项目列表 html代码： JavaScript代码： 运行结果：1.学习 JavaScript 2.学习 Vue 3.创建激动人心的代码 在控制台，输入 app4.todos.push({ text: ‘新的 item' })，你会看到列表中追加了一个新的 item。 总结：可以通过数据确定我们项目列表的长度和内容，从而减少了html的代码量以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |