![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue2
文章平均质量分 57
今天的接口写完了吗?
别无他法,唯手熟尔
展开
-
使用vue指令将数据渲染到表格中
首先我们肯定需要遍历数组的,所以需要使用v-for标签;然后我们每一条数据对应一行,所以v-for需要添加在tr标签上;其次我们需要将编号,所以需要使用索引的遍历语法;然后我们要将数据展示到表格的单元格中,所以我们需要使用{{}}插值表达式;最后,我们需要转换内容,所以我们需要使用v-if指令,进行条件判断和内容的转换。如上图所示,我们提供好了数据模型,users是数组集合,提供了多个用户信息。然后我们需要将数据以表格的形式,展示到页面上,其中,性别需要转换成中文男女,等级需要将分数数值转换成对应的等级。原创 2024-01-14 20:19:41 · 610 阅读 · 0 评论 -
v-for指令的使用
【代码】v-for指令的使用。原创 2024-01-14 20:14:57 · 380 阅读 · 0 评论 -
v-if和v-show
指令描述v-if条件性的渲染某元素,判定为true时渲染,否则不渲染v-if-elsev-elsev-show根据条件展示某元素,区别在于切换的是display属性的值。原创 2024-01-14 20:11:15 · 322 阅读 · 0 评论 -
Vue指令-v-on
v-on: 用来给html标签绑定事件的。需要注意的是如下2点v-on语法给标签的事件绑定的函数,必须是vue对象种声明的函数v-on语法绑定事件时,事件名相比较js中的事件名,没有on例如:在js中,事件绑定demo函数.vue中,事件绑定demo函数。原创 2024-01-14 20:02:09 · 370 阅读 · 0 评论 -
V-bind 和V-Model
v-bind: 为HTML标签绑定属性值,如设置 href , css样式等。当vue对象中的数据模型发生变化时,标签的属性值会随之发生变化。data属性中数据变化,我们知道可以通过赋值来改变,但是视图数据为什么会发生变化呢?视图数据发生变化,vue对象的data属性中的数据也会随着变化。v-model: 在表单元素上创建双向数据绑定。vue对象的data属性中的数据变化,视图展示会一起变化。原创 2024-01-14 11:46:58 · 480 阅读 · 0 评论 -
Vue2的入门
通过我们学习的html+css+js已经能够开发美观的页面了,但是开发的效率还有待提高,那么如何提高呢?我们先来分析下页面的组成。一个完整的html页面包括了视图和数据,数据是通过请求 从后台获取的,那么意味着我们需要将后台获取到的数据呈现到页面上,很明显, 这就需要我们使用DOM操作。正因为这种开发流程,所以我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想,即让我们开发者更加关注数据,而非数据绑定到视图这种机械化的操作。那么具体什么是MVVM思想呢?原创 2024-01-14 11:26:09 · 856 阅读 · 0 评论