面对看似复杂而繁多vue语法，其实静下心来理解无非也就是
if判断和for循环
if
实 例 \color{#FF0000}{实例} 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- view层 模版 -->
<div id="app">
<!-- 默认是true -->
<h2 v-if="ok">Yes</h2>
<h2 v-else>No</h2>
</div>
<!-- 1.导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<script>
var vm = new Vue({
// 数据
el:"#app",
data:{
ok: true
}
});
</script>
</body>
</html>
展示结果
上述结果只是简单的展示一下if的效果，各位同学还是得体会其中思想
for
实 例 \color{#FF0000}{实例} 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- view层 模版 -->
<div id="app">
<!-- 相当于Java中的foreach -->
<li v-for="item in items ">
{{item.message}}
</li>
</div>
<!-- 1.导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<script>
var vm = new Vue({
// 数据
el:"#app",
data:{
items: [
{message: 'love mj'},
{message: 'love mje'}
]
}
});
</script>
</body>
</html>
运行结果：
2399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
