Vue 学习之 v-if 和 v-for 指令，tomcat 常见面试题
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<h2 v-if='flag'>v-if 的使用</h2>
<h2 v-show='flag'>v-show 的使用</h2>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:true
},
methods:{
}
})
</script>
</body>
</html>
效果如下:
通过演示效果我们能看到 v-if 和 v-show 都能控制标签元素的现实和隐藏，但相互之间又有区别
指令 | 说明
------ | --------------------------------------------------------------------------------------
v-if | 每次都会重新删除或创建元素，有较高的切换性能消耗如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
v-show | 每次不会重新进行 DOM 的删除和创建操作，只是切换了元素的 display:none 样式有较高的初始渲染消耗如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if
====================================================================================================================================
针对数据为数组的类型，循环的使用。
简单插值的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>{{list[0]}}</p>
<p>{{list[1]}}</p>
<p>{{list[2]}}</p>
<p>{{list[3]}}</p>
<p>{{list[4]}}</p>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4, 5, 6]
},
methods: {}
});
</script>
</body>
</html>
循环使用
简单的使用循环
获取循环下标
集合中的元素是对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
list: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' },
{ id: 4, name: '小明' }
]
},
methods: {}
});
</script>
</body>
</html>
数组中的元素是自定义的对象的时候直接通过"."存取器来获取元素。
注意：在遍历对象身上的键值对的时候， 除了有 val，key ,在第三个位置还有 一个 索引 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
user: {
id: 1,
name: '波波烤鸭',
gender: '男'
}
},
methods: {}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p v-for="i in 10">这是第 {{ i }} 次循环</p>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>
还未添加个人签名 2021.11.08 加入
还未添加个人简介
评论