<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Vue学习第二天 </title>
<script type="text/javascript" src="../js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
</style>
</head>
<body>
<div id="root">
<!-- 简单匹配结构 -->
计数器:{{index}}
<button @click="index++">计数器自增</button>
<!-- v-show隐藏的节点仍然可以拿到,但v-if会直接从DOM上删掉元素,所以无法获取到 -->
<span v-show="index===0">v-show生效,当前值为0</span></span>
<!-- v-if可以和v-else-if及v-else连用,但中间不能被任何元素打断 -->
<span v-if="index === 1">显示1啦</span>
<span v-else-if="index === 2">显示2啦</span>
<span v-else-if="index === 3">显示3啦</span>
<span v-else-if="index === 4">显示4啦</span>
<span v-else-if="index === 5">显示5啦</span>
<span v-else>都不匹配哦</span>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data() {
return {
index: 0
}
},
// 所有的方法都要放在这里,标识被vue管理
methods: {},
computed: {}
});
</script>
</body>
</html>
Vue 条件渲染
最新推荐文章于 2024-04-04 10:30:14 发布