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

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

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

绑定 DOM 元素文本值

@H_@R_301_450@_1@

HTML代码:@H_@R_301_450@_1@

JavaScript代码:@H_@R_301_450@_1@

运行结果:Hello Vue!@H_@R_301_450@_1@

总结:

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

绑定 DOM 元素属性

@H_@R_301_450@_1@

用v-bind指令绑定span元素的title属性@H_@R_301_450@_1@

HTML代码:@H_@R_301_450@_1@

JavaScript代码:@H_@R_301_450@_1@

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

运行结果:@H_@R_301_450@_1@

总结:

v-bind 属性被称为指令,是由 Vue 提供的专用属性,该指令的作用就是:“将此元素的 title 属性与 Vue 实例的 message 属性保持关联更新”。当我们改变app2.message的值时,绑定了title属性的元素会进行更新。@H_@R_301_450@_1@

条件

@H_@R_301_450@_1@

用v-if指令判断条件@H_@R_301_450@_1@

HTML代码:@H_@R_301_450@_1@

301_450@_1@

JavaScript代码:@H_@R_301_450@_1@

运行结果:你可以看到我@H_@R_301_450@_1@

总结:

当我们把app3.seen的值改为false以后,我们会看到 span 消失。说明我们不只是可以将数据绑定到文本和属性,也可以将数据绑定到 DOM 结构。从而通过数据的更改实现元素的插入/更新/删除操作。@H_@R_301_450@_1@

循环@H_@R_301_450@_1@

v-for 指令,可以使用数组中的数据来展示一个项目列表@H_@R_301_450@_1@

HTML代码:@H_@R_301_450@_1@

  • JavaScript代码:@H_@R_301_450@_1@

    代码' } ] } })

    运行结果:1.学习 JavaScript 2.学习 Vue 3.创建激动人心的代码@H_@R_301_450@_1@

    在控制台,输入 app4.todos.push({ text: ‘新的 item' }),你会看到列表中追加了一个新的 item。

    总结:

    可以通过数据确定我们项目列表的长度和内容,从而减少了html的代码量@H_@R_301_450@_1@

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

    猜你在找的Vue相关文章