当前位置:网站首页>v-for指令:根据数据生成列表结构
v-for指令:根据数据生成列表结构
2022-08-10 16:24:00 【爱雨天】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<ul>
<li v-for="(it,index) in arr">
{
{index+1}}许嘉茵币2:{
{it}}
</li>
</ul>
<h2 v-for="item in vegetables" v-bind:title="item.name">
{
{item.name}}
</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
arr:["北京","上海","广州","深圳"],
vegetables:[
{name:"徐继业"},
{name:"徐锦江"}
]
},
methods:{
add:function(){
this.vegetables.push({name:"必杀"})
},
remove:function(){
this.vegetables.shift();
}
}
}
)
</script>
</body>
</html>
边栏推荐
猜你喜欢
随机推荐
拆分整数为2的幂次项和 → 理解多重背包问题二进制优化的核心思想
本地导入不报错,服务器端报错 No module named xxx
怎么学自动化测试
十年架构五年生活-09 五年之约如期而至
LeetCode-101. Symmetric Tree
MySQL-创建、修改和删除表
LeetCode-876. Middle of the Linked List
Andorid源码编译需要掌握的shell语法(三)
Qt 绘图和绘图设备
生成树协议(STP---Spanning Tree Protocol)
C专家编程 第10章 再论指针 10.5 使用指针向函数传递一个多维数组
被大厂面试官参考的Redis笔记,堪称Redis面试天花板
易基因|深度综述:m6A RNA甲基化在大脑发育和疾病中的表观转录调控作用
Pigsty:开箱即用的开源数据库发行版
【每日一题】【leetcode】25. 数组-旋转数组的最小数字
清理空的 Jetpack Compose 应用程序模板
数据治理项目成功的要点,企业培养数据要把握好关键环节
推荐几款最好用的MySQL开源客户端,建议收藏!
潜水员 ← 二维费用的背包问题
Colocate Join :ClickHouse的一种高性能分布式join查询模型