vue.js声明式渲染和条件与循环基础知识

前端之家收集整理的这篇文章主要介绍了vue.js声明式渲染和条件与循环基础知识前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

vue.js声明式渲染和条件与循环的具体内容分享给大家

绑定 DOM 元素文本值

HTML代码

JavaScript代码

运行结果:Hello Vue!

总结:

数据和 DOM 已经被关联在一起,当我们改变app.message的数据,所渲染的的DOM元素会相应地更新。

绑定 DOM 元素属性

用v-bind指令绑定span元素的title属性

HTML代码

JavaScript代码

页面加载于 ' + new Date() } })

运行结果:

总结:

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的代码

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    原文链接:https://www.f2er.com/vue/37457.html

    猜你在找的Vue相关文章