v-for指令用法一
2024-09-08 10:21:03
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="src/assets/vue2.min.js"></script>
</head>
<body>
<ul>
<li v-for="option in options">
<p class="text-success" @click="getIndex($index)">{{option.text}}{{option.value}}</p>
</li>
</ul>
<div v-if="isNaN(click)==false">
<span>你点击的索引为: {{ click }}</span>
</div>
<div v-else>
<p class="text-danger">试着点击上方LI条目</p>
</div>
<script type="text/javascript">
new Vue({
el: 'body',
data: {
click: 'a',
options: [
{ text: '上海市', value: '20' },
{ text: '湖北省', value: '43' },
{ text: '河南省', value: '45' },
{ text: '北京市', value: '10' }
]
},
methods:{
getIndex:function(index){
this.click=index; //这里的click取值是data里的值，每触发一次点击事件，click就被重新赋值一次
}
}
});
</script>
</body>
</html>
最新文章
- MongoDBDao 工具类（包含分页取数据）
- javascript模板库jsrender加载并缓存外部模板文件
- Android 中的 Intent 简介
- 用c#开发微信 (14) 微统计 - 阅读分享统计系统 4 部署测试 (最终效果图)
- LeetCode - 42. Trapping Rain Water
- C/C++链表操作（面试）
- [转]SIP穿越NAT&FireWall解决方案
- python中的实例方法、静态方法、类方法、类变量和实例变量
- shell切换用户执行后面语句 su与su -的区别
- mysql设置指定ip远程访问连接实例
- mysql触发器的例子--插入前更新数据
- eclipse中的项目导出成Androidstudio的识别的项目，so文件打包不进去
- swift 类 结构体 作为参数 以及可变参数
- # linux下安装Nodejs环境
- angular 指令梳理 —— 前端校验
- sencha touch(7)——list组件
- libusb 开发者指南-牛胜超（转）
- Shell脚本创建的文件夹末尾有两个问号怎么回事？
- 怎样用命令行开启或关闭Windows服务
- 微服务框架surging学习之路——序列化 （转载https://www.cnblogs.com/alangur/p/10407727.html）