Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
v-if 的作用
根据表达式的真假来切换元素的显示状态。
原理是通过操作DOM元素进行切换状态。当表达式为true,切换显示,当表达式为false,切换删除。
<p v-if="see">我看到你了</p>
也可以写成表达式
<p v-if="scroll>90">优秀</p>
那么v-show和v-if有什么区别?
v-if:操作的是DOM,如果为false,那么久直接移除。缺点是消耗资源较多。
v-show:操作的是css ,如果为false,那么style=”display: none;”。
频繁切换采用v-show,因为消耗资源小,因此日常用v-show。
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<p><input type="button" value="切换显示" @click="toggleSee"></p>
<p v-if="see">我看到你了</p>
<p v-show="see">我用v-show看到你了</p>
<p v-if="scroll>90">优秀</p>
</div>
<script>
new Vue({
el: "#app",
data: {
see: false,
scroll: 95
},
methods: {
toggleSee: function () {
this.see = !this.see
}
}
})
</script>
</body>
</html>