<vue初体验> 基础知识 2、vue的列表展示
系列导航
一、 效果
利用v-for指令循环展现列表
使用谷歌浏览器动态改变数据展现自动变更
这里的app跟代码中let app = new Vue() 的app对应
二、代码结构
三、代码
02-Vue列表展示.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-Vue列表展示</title>
</head>
<body> <div id="app">
<ul>
<li v-for="item in books"> {{item}}</li>
</ul>
</div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
books: ['三国演义', '西游记', '水浒传']
}
})
</script>
</body>
</html>
四、代码解释
v-for指令 先学会用后面会详细讲解。
<vue初体验> 基础知识 2、vue的列表展示的更多相关文章
- Vue框架之基础知识
在没有学习基础知识之前,我们需要下载vue的js文件,在使用vue语法之前引包 <script src='./vue.js'></script> 一.模板语法 模板语法是一种可 ...
- Vue初体验（一）
每个 Vue 应用都需要通过实例化 Vue 来实现. 语法格式如下: var vm = new Vue({ // 选项 }) 接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: 可以看到在 V ...
- Vue和Element基础使用,综合案例学生列表实现
知识点梳理 课堂讲义 1.Vue 快速入门 1.1.Vue的介绍 Vue是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合. 通过尽可能简单的A ...
- html基础知识2（有序无序列表，表格）2017-03-08
摘要:php 基础知识2 重点:有序无序列表:<a>标签:<table>标签 内容容器 1.段落标签 <p></p> 注: 执行前后换行,并空一行 ...
- vue初体验-ES6 基础知识补充 let 和const
本人水平有限,如内容有误,欢迎指正,谢谢. let : 主要特点: 1.作用域只局限于当前代码块.2.使用let 声明的变量作用域不会被提升.3.在相同的作用域下不能声明相同的变量.4.for循环体 ...
- vue初体验：实现一个增删查改成绩单
前端变化层出不穷,去年NG火一片,今年react,vue火一片,ng硬着头皮看了几套教程,总被其中的概念绕晕,react是faceback出品,正在不断学习中,同时抽时间了解了vue,查看了vue官方 ...
- Vue.js 运行环境搭建详解（基于windows的手把手安装教学）及vue、node基础知识普及
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架——只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- VUE初体验篇-安装
现代前端框架大行其道,讲前端思想从操作dom的阶段,升级到操作数据的阶段.vue作为三大前端框架之一,其中平缓的学习曲线,让好多前端新手非常喜欢,应用也越来越广泛.虽然其他两个框架有facebook, ...
- vue初体验
作为一个前端的小菜鸟,在平时的开发与学习中,除了要深入了解javascript 及 css 的各种特性,熟悉一门框架也是必不可少的.vue以其小巧,轻便,学习平滑等各种特性深受欢迎. 这里总结一下小菜 ...
- vue初学之node.js安装、cnpm安装、vue初体验
1. 如果本机没有安装node运行环境,请下载node 安装包进行安装.地址:https://nodejs.org/en/ 2.装完,使用cmd命令行输入:node -v回车 如果输出版本号则成功. ...
随机推荐
- drf实战和源码剖析----学习笔记1
学自:bilibili武沛齐老师. 武老师讲课:清晰,连贯,实用,透彻,真乃名师! # 1. 什么是前后端分离 - 不分离,主要用于后台系统(CRUD)和用户量上的情况,开发起来代价小- 分离,面向用 ...
- 解决GET http://192.168.41.103:9528/sockjs-node/info?t=1678639328658 net::ERR_CONNECTION_TIMED_OUT
问题现象 解决办法 找到依赖/node_modules/sockjs-client/dist/sockjs.js注释掉下面的一行代码
- JXNU acm选拔赛 涛神的城堡
涛神的城堡 Time Limit : 3000/1000ms (Java/Other) Memory Limit : 65535/32768K (Java/Other) Total Submiss ...
- 山海鲸Cesium：用更简单的方式升级视效
CesiumJS作为绝大多数人都在用的开源地球可视化引擎,视觉效果并不拔尖,这让很多giser都想着有一天升级一下视效,从众多平庸的项目中脱颖而出.然而,对于一些使用Cesium的项目来说,要想达到C ...
- 【Python】【OpenCV】定位条形码（一）
关于二维码和条形码的检测和识别,在OpenCV中已经有提供了对应的API,cv2.QRCodeDetector() | cv2.barcode_BarcodeDetector() ,相关的实现极其简单 ...
- 独立于 Github，更方便地管理自己的静态网站？来试试这套自托管 Git 仓库方案！
原文章来自:独立于 Github,更方便地管理自己的静态网站?来试试这套自托管 Git 仓库方案! - Sxrhhh 的个人小站 就在前几天,我成功地将我自己的网站由 wordpress 迁移为了静态 ...
- 《HelloGitHub》第 93 期
兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweiha ...
- springboot整合apollo配置中心
springboot整合apollo配置中心 springboot整合apollo配置中心官网文档说明得比较清楚,但还是有一些坑注意的. 官网文档:https://www.apolloconfig.c ...
- 使用IO流写一个随机点名程序
前言 最近学习了关于IO流的一些知识点,但是应用还不够,所以今天做个简单案例: 随机创建名字导入文件中: package ioandcollection; import java.io.Buffere ...
- 文心一言 VS 讯飞星火 VS chatgpt （31）-- 算法导论5.2 3题
三.利用指示器随机变量来计算掷n 个骰子之和的期望值. 文心一言: 为了计算掷n个骰子之和的期望值,我们需要先了解一个重要的概念:指示器随机变量. 指示器随机变量是一种特殊的随机变量,它只有两个取值: ...