Vue中echarts v-if条件渲染与v-show区别
一.v-if是什么？
v-if是用于根据表达式的值的真假条件渲染元素,可以在 Vue 插入/更新/删除元素时自动应用过渡效果。
v-if是真实的条件渲染，因为它会确保条件块在切换时合适地销毁与重建条件块内的事件监听器和子组件。
二.v-if分析
v-if 完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中。
-
-
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>pejeco
title>
-
<link rel="stylesheet" type="text/css" href="css/style.css">
-
head>
-
<div id="example01">
-
<p v-if="yes">yes
p>
-
<p v-if="no">no
p>
-
<p v-if="age>25">Age:{
{age}}
p>
-
<p v-if="name.indexOf('lin')>0">Name:{
{name}}
p>
-
div>
-
<script src="js/vue.js">
script>
-
<script type="text/javascript">
-
var vm=
new Vue({
-
el:
"#example01",
-
data:{
-
yes:
true,
//真的，插入
-
no:
false,
//假的，刪除
-
age:
29,
-
name:
'colin'
-
}
-
})
-
script>
-
body>
-
html>
-
-
-
效果图：
因为v-if是一个指令，需要将它添加到一个元素上。但是如果想切换多个元素，则可以把元素当作包装元素，并在其上使用v-if，最终的渲染结果不会包含它。
-
-
<div id="example">
-
<template v-if="ok">
-
<h1>Title
h1>
-
<p>Paragraph1
p>
-
<p>Paragraph2
p>
-
template>
-
div>
-
-
js则：
v-if是惰性的--如果初始渲染时条件为假，则什么也不做，在条件第一次变为真时才开始局部编译（编译会被缓存起来）
看到这个效果是不是想到css中的display：none 啊。对此vue中还真有用来表示display的v-show。
三.v-show: 元素始终被编译并保留，只是简单地基于CSS切换。
-
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>pejeco
title>
-
head>
-
<div id="example"v-show="isShow" style="display: none;">
-
<h1>Title
h1>
-
<p>Paragraph1
p>
-
<p>Paragraph2
p>
-
div>
-
<script src="js/vue.js">
script>
-
<script type="text/javascript">
-
var vm=
new Vue({
-
el:
"#example",
-
data:{
-
isShow:
true
-
}
-
})
-
script>
-
body>
-
html>
-
-
-
当改成这样的时候
-
<div id="example"v-show="isShow">
-
<h1>Title
h1>
-
<p>Paragraph1
p>
-
<p>Paragraph2
p>
-
div>
-
<script src="js/vue.js">
script>
-
<script type="text/javascript">
-
var vm=
new Vue({
-
el:
"#example",
-
data:{
-
isShow:
false
-
}
-
})
-
script>
-
-
对比下得到：v-show控制显隐，是通过js代码去修改元素的element style，如果value为false，设置display: none;如果value为true，设置display: ''；于是value为true时，只能将element style中的display效果清除，并不能覆盖css中的display效果；
要注意：
(1)要掩藏html时不要把display: none; 写在css中
-
<style type="text/css">
-
#example{
-
display: none;
-
}
-
style>
-
-
<div id="example"v-show="isShow">
-
<h1>Title
h1>
-
<p>Paragraph1
p>
-
<p>Paragraph2
p>
-
div>
-
-
所以：使用v-show的话，在vue解析之前隐藏DOM的话，尽量在style属性里面设置display的值，不要在css文件中。
