欢迎光临
我的个人博客网站

Vue基础(四):模板语法(三)


1. 属性绑定

Vue要实现动态处理属性,就需要使用到v-bind指令用法了。

Vue基础(四):模板语法(三)

Vue基础(四):模板语法(三)

v-bind指令的用法呢就是v-bind:属性,也可以缩写成:属性。

<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>Vue的基本使用</title> </head> <body>     <div id="app">     <a v-bind:href="url">百度</a>     <a :href="url">百度1</a>     <button v-on:click='handle'>切换</button>   </div>   <script type="text/javascript" src="js/vue.js"></script>   <script type="text/javascript">     /*       属性绑定     */     var vm = new Vue({       el: '#app',       data: {         url: 'http://www.baidu.com'       },       methods: {         handle: function(){           // 修改URL地址           this.url = 'https://cn.bing.com/';         }       }     });   </script> </body> </html>

执行的效果:

 Vue基础(四):模板语法(三)

我们先查看元素,a标签中的href是指向百度网站的。

Vue基础(四):模板语法(三)

这时我们点击百度和百度1,都会跳转到百度网站, 

Vue基础(四):模板语法(三)

然后我们回到界面,点击切换按钮,查看元素信息。

Vue基础(四):模板语法(三)

此时再点击链接,就跳转到必应网站了。

Vue基础(四):模板语法(三)

这就证明我们绑定属性成功了。

2. 样式绑定

2.1 Class绑定

开发中一般是通过控制class属性来控制css样式的展示,Vue中样式绑定一样是使用v-bind指令。

然而样式绑定也有两种方式绑定,分别是对象语法绑定和数组语法绑定,直接上例子。

对象语法绑定:

<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>Vue的基本使用</title> <style type="text/css">     .active {       border: 1px solid red;       width: 100px;       height: 100px;     }     .error {       background-color: orange;     }   </style> </head> <body>   <div id="app">     <div v-bind:class="{active: isActive,error: isError}">       测试样式     </div>     <button v-on:click='handle'>切换</button>   </div>   <script type="text/javascript" src="js/vue.js"></script>   <script type="text/javascript">     /*       样式绑定      */     var vm = new Vue({       el: '#app',       data: {         isActive: true,         isError: true       },       methods: {         handle: function(){           // 控制isActive的值在true和false之间进行切换           this.isActive = !this.isActive;           this.isError = !this.isError;         }       }     });   </script> </body> </html>

执行的效果:

Vue基础(四):模板语法(三)

点击切换就会去掉盒子,再点击又会出现。 

Vue基础(四):模板语法(三)

数组对象绑定:

<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>Vue的基本使用</title> <style type="text/css">     .active {       border: 1px solid red;       width: 100px;       height: 100px;     }     .error {       background-color: orange;     }   </style> </head> <body>   <div id="app">     <div v-bind:class='[activeClass, errorClass]'>测试样式</div>     <button v-on:click='handle'>切换</button>   </div>   <script type="text/javascript" src="js/vue.js"></script>   <script type="text/javascript">     /*       样式绑定      */     var vm = new Vue({       el: '#app',       data: {         activeClass: 'active',         errorClass: 'error'       },       methods: {         handle: function(){           this.activeClass = '';           this.errorClass = '';         }       }     });   </script> </body> </html>

效果和对象语法绑定差不多,就是取消了盒子之后,再点击切换就无效了。

如果你想要像对象语法绑定案例一样,就要在方法里面加判断了,懒得搞。

两者还能结合使用:

<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>Vue的基本使用</title> <style type="text/css">     .active {       border: 1px solid red;       width: 100px;       height: 100px;     }     .error {       background-color: orange;     }     .test {       color: blue;     }     .base {       font-size: 28px;     }   </style> </head> <body>   <div id="app">     <div v-bind:class='[activeClass, errorClass, {test: isTest}]'>测试样式</div>     <div v-bind:class='arrClasses'></div>     <div v-bind:class='objClasses'></div>     <div class="base" v-bind:class='objClasses'></div>      <button v-on:click='handle'>切换</button>   </div>   <script type="text/javascript" src="js/vue.js"></script>   <script type="text/javascript">     /*       样式绑定相关语法细节:       1、对象绑定和数组绑定可以结合使用       2、class绑定的值可以简化操作       3、默认的class如何处理?默认的class会保留     */     var vm = new Vue({       el: '#app',       data: {         activeClass: 'active',         errorClass: 'error',         isTest: true,         arrClasses: ['active','error'],         objClasses: {           active: true,           error: true         }       },       methods: {         handle: function(){           // this.isTest = false;           this.objClasses.error = false;         }       }     });   </script> </body> </html>

执行的效果:

Vue基础(四):模板语法(三)

点击切换,下面两个盒子变成白色。

Vue基础(四):模板语法(三)

2.2 style绑定 

和class样式差不多,把class换成style就可以了。

<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>Vue的基本使用</title> </head> <body>   <div id="app">     <div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>     <div v-bind:style='objStyles'></div>     <div v-bind:style='[objStyles, overrideStyles]'></div>     <button v-on:click='handle'>切换</button>   </div>   <script type="text/javascript" src="js/vue.js"></script>   <script type="text/javascript">     /*       样式绑定之内联样式Style:            */     var vm = new Vue({       el: '#app',       data: {         borderStyle: '1px solid blue',         widthStyle: '100px',         heightStyle: '200px',         objStyles: {           border: '1px solid green',           width: '200px',           height: '100px'         },         overrideStyles: {           border: '5px solid orange',           backgroundColor: 'blue'         }       },       methods: {         handle: function(){           this.heightStyle = '100px';           this.objStyles.width = '100px';         }       }     });   </script> </body> </html>

执行的效果:

Vue基础(四):模板语法(三)

Vue基础(四):模板语法(三)

可以很明显的看到盒子缩小了。 

3. 分支循环结构 

3.1  分支结构

if判断大家总会吧,直接上官网api截图和案例。

Vue基础(四):模板语法(三)

Vue基础(四):模板语法(三)

Vue基础(四):模板语法(三)

这里还有一个v-show:

Vue基础(四):模板语法(三)

 

 

案例:

<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>Vue的基本使用</title> </head> <body>   <div id="app">     <div v-if='score>=90'>优秀</div>     <div v-else-if='score<90&&score>=80'>良好</div>     <div v-else-if='score<80&&score>60'>一般</div>     <div v-else>比较差</div>     <div v-show='flag'>测试v-show</div>     <button v-on:click='handle'>点击</button>   </div>   <script type="text/javascript" src="js/vue.js"></script>   <script type="text/javascript">     /*       分支结构        v-show的原理:控制元素样式是否显示 display:none     */     var vm = new Vue({       el: '#app',       data: {         score: 10,         flag: false       },       methods: {         handle: function(){           this.flag = !this.flag;         }       }     });   </script> </body> </html>

3.2 循环结构

Vue基础(四):模板语法(三)

Vue基础(四):模板语法(三)

v-for遍历数组: 

<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>Vue的基本使用</title> </head> <body>   <div id="app">     <div>水果列表</div>     <ul>       <li v-for='item in fruits'>{{item}}</li>       <li v-for='(item, index) in fruits'>{{item + '---' + index}}</li>       <li :key='item.id' v-for='(item, index) in myFruits'>         <span>{{item.ename}}</span>         <span>-----</span>         <span>{{item.cname}}</span>       </li>      </ul>   </div>   <script type="text/javascript" src="js/vue.js"></script>   <script type="text/javascript">     /*       循环结构-遍历数组     */     var vm = new Vue({       el: '#app',       data: {         fruits: ['apple', 'orange', 'banana'],         myFruits: [{           id: 1,           ename: 'apple',           cname: '苹果'         },{           id: 2,           ename: 'orange',           cname: '橘子'         },{           id: 3,           ename: 'banana',           cname: '香蕉'         }]       }     });   </script> </body> </html>

执行的效果:

Vue基础(四):模板语法(三)

v-for遍历对象:

<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>Vue的基本使用</title> </head> <body>   <div id="app">     <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>   </div>   <script type="text/javascript" src="js/vue.js"></script>   <script type="text/javascript">     // 使用原生js遍历对象     var obj = {       uname: 'lisi',       age: 12,       gender: 'male'     }     for(var key in obj) {       console.log(key, obj[key])     }     /*       循环结构     */     var vm = new Vue({       el: '#app',       data: {         obj: {           uname: 'zhangsan',           age: 13,           gender: 'female'         }       }     });   </script> </body> </html>

执行的效果:

Vue基础(四):模板语法(三)

赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue基础(四):模板语法(三)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏