(十五)、条件渲染
1.配置methods手动改变天气
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>今天天气很{{isHost ? '炎热' : '凉爽'}}</h1> <button id="bttn" @click="change">点击切换天气</button> </div> <script> var vm = new Vue({ el: '#root', data: { isHost: true, }, methods:{ // 进行可以手动的改变天气 change(){ if(this.isHost){ this.isHost = false ; }else{ this.isHost = true ; } } } }); </script> </body> </html>
2.表达式直接取反改变天气
- 这里不用配置methods方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>今天天气很{{isHost ? '炎热' : '凉爽'}}</h1> <button id="bttn" @click="isHost = !isHost">点击切换天气</button> </div> <script> var vm = new Vue({ el: '#root', data: { isHost: true, }, methods:{ } }); </script> </body> </html>
3.利用v-show做条件渲染
条件渲染: v-if: 适用于:切换频率很低的场景 特点:不展示Dom结点直接被删除 v-show: 适用于: 切换频率很高的场景 特点: 不展示Dom结点没有被删除,仅仅是样式隐藏了 备注: 使用v-if的时候,Dom结点可能无法取到,使用v-show Dom结点一定能被获取
- 正常情况下两个div都会显示出来
- 但是我们利用v-show.可以通过条件进行判断。假如说为true,那么就展示。否则就进行隐藏不展示
- 实质是节点隐藏，不是干掉
- 有缓存
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> <style> #myPicture{ width: 100%; height: 100%;; } </style> </head> <body> <div id="root"> <h1>今天天气很{{isHost ? '炎热' : '凉爽'}}</h1> <button id="bttn" @click="isHost = !isHost">点击切换天气</button> <!-- 使用v-show做条件渲染 --> <!-- 只有天气炎热才会展示下面的这个图片 --> <div v-show="isHost"> //假如说v <img src="https://p8.itc.cn/q_70/images03/20210708/9dc29d4072a44f93b12ed4387bfccd85.jpeg" alt="好热啊"><br> <span>建议: 心静自然凉</span> </div> <!-- 只有天气凉爽才会展示下面的这一张图片 --> <div v-show="!isHost"> <img src="https://img95.699pic.com/photo/40018/3976.jpg_wh860.jpg%21/fw/562" alt="凉爽" id="myPicture"><br> <span>建议:多喝热水</span> </div> </div> <script> var vm = new Vue({ el: '#root', data: { isHost: true, }, methods:{ // 进行可以手动的改变天气 change(){ if(this.isHost){ this.isHost = false ; }else{ this.isHost = true ; } } } }); </script> </body> </html>
4.利用v-if/v-else做条件渲染
- 无缓存
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> <style> #myPicture{ width: 100%; height: 100%;; } </style> </head> <body> <!-- 条件渲染: v-if: 适用于:切换频率很低的场景 特点:不展示Dom结点直接被删除 v-show: 适用于: 切换频率很高的场景 特点: 不展示Dom结点没有被删除,仅仅是样式隐藏了 备注: 使用v-if的时候,Dom结点可能无法取到,使用v-show Dom结点一定能被获取 --> <div id="root"> <h1>今天天气很{{isHost ? '炎热' : '凉爽'}}</h1> <button id="bttn" @click="isHost = !isHost">点击切换天气</button> <!-- 使用v-show做条件渲染 --> <!-- 只有天气炎热才会展示下面的这个图片 --> <!-- <div v-show="isHost"> //假如说v <img src="https://p8.itc.cn/q_70/images03/20210708/9dc29d4072a44f93b12ed4387bfccd85.jpeg" alt="好热啊"><br> <span>建议: 心静自然凉</span> </div> --> <!-- 只有天气凉爽才会展示下面的这一张图片 --> <!-- <div v-show="!isHost"> <img src="https://img95.699pic.com/photo/40018/3976.jpg_wh860.jpg%21/fw/562" alt="凉爽" id="myPicture"><br> <span>建议:多喝热水</span> </div> --> <!-- ----------------------------------------------------------------------- --> <!-- 只有天气炎热才会展示下面的这个图片 --> <div v-if="isHost"> //假如说v <img src="https://p8.itc.cn/q_70/images03/20210708/9dc29d4072a44f93b12ed4387bfccd85.jpeg" alt="好热啊"><br> <span>建议: 心静自然凉</span> </div> <!-- 只有天气凉爽才会展示下面的这一张图片 --> <div v-else> <img src="https://img95.699pic.com/photo/40018/3976.jpg_wh860.jpg%21/fw/562" alt="凉爽" id="myPicture"><br> <span>建议:多喝热水</span> </div> </div> <script> var vm = new Vue({ el: '#root', data: { isHost: true, }, methods:{ // 进行可以手动的改变天气 change(){ if(this.isHost){ this.isHost = false ; }else{ this.isHost = true ; } } } }); </script> </body> </html>
