#本案例需要熟悉v-for与v-on这两个vue内部指令，下面通过两个简单的案例，带领大家迅速熟悉一下这两个常用的内部指令

v-for指令：主要用于列表的渲染与循环数组

简单案例：

关键代码部分：

<div id="app"><div v-for="(item,index) in list" data-id=“index">索引是：{{index}}，元素内容是：{{item}}</div>
</div>
<script>var vm = new Vue({el: '#app',data: {list: [1, 2, 3]}})
</script>

v-on指令：事件监听指令配合事件类型一块使用，最常见事件类型click（单击事件）

简单案例

<button v-on:click=函数名">单击</button>

学生列表案例

案例

代码部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><title>Document</title>
</head>
<body><div id="app"><button v-on:click="add">添加</button><button v-on:click="del">删除</button><table><tr><th>班级</th><th>姓名</th><th>性别</th><th>年龄</th></tr><tr v-for="item in students"><td>{{item.grade}}</td><td>{{item.name}}</td><td>{{item.gender}}</td><td>{{item.age}}</td></tr></table></div><script>var vm = new Vue({el: '#app',data: {students:[]},methods:{add(){var student = {grade: '1', name: 'zhangsan', gender: '男', age: 20}this.students.push(student)},del(){this.students.pop()}}})</script></body>
</html>

建议初学者先直接先跑一下代码，出结果之后再认真深究其中的代码

VUE:学生列表案例——内部指令v-for与v-on简单应用相关推荐

【Vue】—列表渲染v-for指令
[Vue]-列表渲染v-for指令
Vue: 图书列表案例
图书列表案例静态列表效果基于数据实现模板效果处理每行的操作按钮 1. 提供的静态数据数据存放在vue 中 data 属性中 var vm = new Vue({el: '#app',data: ...
【15】Vue：02-Vue表单基本操作、表单修饰符、自定义指令、计算属性computed、侦听器watch、过滤器、生命周期、数组变异方法、替换数组、动态数组响应数据、图书列表案例、TODOS案例
文章目录 day02 Vue常用特性表单基本操作表单修饰符自定义指令 Vue.directive 注册全局指令 Vue.directive 注册全局指令带参数自定义指令局部指令计算属性 c ...
Vue基础学习（一）------内部指令
一.v-if v-else v-show 指令 1.v-if v-if:是vue 的一个内部指令,指令用在我们的html中,用来判断是否加载html的DOM 现在举个栗子,判断用户的登录操作 ...
php for 循环 try_PHP基础案例四：展示学生列表
php中文网课程每日17点准时技术干货分享相关推荐: 1.<PHP基础案例一:展示学生资料卡> 2.<PHP基础案例二:计算学生年龄> 3.<PHP基础案例三:判断学 ...
Vue作业-学生列表
作业内容代码实现 <head><title>学生列表</title><script src="../vue.js"></sc ...
vue组件通信案例练习（包含：父子组件通信及平行组件通信）
文章目录一.案例概述二.代码准备工作: 案例1.1:父组件向子组件传值(或者叫:子组件使用父组件属性),采用v-bind方式实现案例1.2:子组件向父组件传值(或者叫:子组件调用父组件方法), ...
Vue _ 教程版 02 指令
目录目标一.模板语法 1.1.插值表达式 1.2.指令 1-2-1. v-text 指令 1-2-2. v-html 指令二.常用指令 2.1.v-show 指令 2.2.v-if 指令 2.3 ...
【第一季】Vue2.0视频教程-内部指令(共8集)
[第一季]Vue2.0视频教程-内部指令(共8集) [第一季]Vue2.0视频教程-内部指令(共8集) 第1节:走起我的Vue2.0 学习这套课程你需要的前置知识: 下载Vue2.0的两个版本: 项目 ...

VUE:学生列表案例——内部指令v-for与v-on简单应用

v-for指令：主要用于列表的渲染与循环数组

简单案例：

关键代码部分：

v-on指令：事件监听指令配合事件类型一块使用，最常见事件类型click（单击事件）

简单案例

学生列表案例

案例

代码部分

VUE:学生列表案例——内部指令v-for与v-on简单应用相关推荐

最新文章

热门文章