简介：本文旨在用最短的篇幅和例子，代入大家入门vue,也是本博主的一个学习记录，本文主要介绍的组件有，v-show,v-bind。
v-show
简介：v-show用来控制标签是显示还是隐藏
学习代码：
<!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>v-show</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <h2 v-show="true">Vue欢迎您！</h2> <!-- 对于show中显示的变量isVisible如果为true那么就显示文本中的内容，如果为false就不现实 --> <h2 v-show="isVisible">这是被控制显示的文本！</h2> <input type="button" value="显示隐藏按钮" @click="showmessage"> </div> </body> <script> const app = new Vue({ el:"#app", data:{ isVisible:false }, methods:{ showmessage(){ this.isVisible = !this.isVisible } } }); </script> </html>
v-bind
v-bind: 用来绑定标签的属性从而通过vue动态修改标签的属性。
学习代码：
<!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>Vue入门</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <img v-bind:src="imagename" v-bind:alt="title" v-bind:width="width" v-bind:height="height"> </div> </body> <script> const app = new Vue({ el:"#app", data:{ title:"这是一张5g图片", imagename:"../01_初始Vue/images/5g.png", width:150, height:150 }, methods:{ } }); </script> </html>
简化代码：
<!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>Vue入门</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <img :src="imagename" v-bind:alt="title" v-bind:width="width" v-bind:height="height"> </div> </body> <script> const app = new Vue({ el:"#app", data:{ title:"这是一张5g图片", imagename:"../01_初始Vue/images/5g.png", width:150, height:150 }, methods:{ } }); </script> </html>
运行结果：
