3.表達式 · 程序員開發筆記

[TOC] #### Vue表達式的應用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/index.css" /> <script type="text/javascript" src="js/vue.js"></script> <title>表達式</title> <style> .class1{ color: red; } .class2{ color: green; } </style> </head> <body> <div id="xy"> {{n+1}}  <h1 :class="'class'+n">{{title}}</h1> <input type="radio" value="1" v-model="n" />紅色 <input type="radio" value="2" v-model="n" />綠色 </div> <script type="text/javascript"> var app = new Vue({ el: "#xy", data: { title: "hello Vue!", n: 1, } }); </script> </body> </html> #### 計算屬性computed實例講解 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/index.css" /> <script type="text/javascript" src="js/vue.js"></script> <title>computed</title> </head> <body> <div id="xy">  n1:<input v-model="n1" type="text"/>+ n2:<input v-model="n2" type="text"/>= <input v-model="sum" type="text"/> </div> <script type="text/javascript"> var app = new Vue({ el: "#xy", computed:{ sum:function(){ return this.n1*1 + this.n2*1; } }, data: { n1: 0, n2:0, } }); </script> </body> </html> #### class中應用表達式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="vue.js"></script> <script src="node_modules/axios/dist/axios.js"></script> <script src="node_modules/lodash/lodash.js"></script> </head> <body> <style> .success { color: green; } .error { color: red; } </style> <div id="hdcms"> <li v-for="v in news">  <span :class="v.status?'success':'error'">{{v.title}}</span> <button v-on:click="changeStatus(v,false)" v-if="v.status">刪除</button> <button v-on:click="changeStatus(v,true)" v-if="!v.status">恢復</button> </li> </div> <script> var app = new Vue({ el: '#hdcms', methods: { changeStatus: function (item, status) { item.status = status; } }, data: { news: [ {title: '后盾人', status: true}, {title: 'houdunren.com', status: true}, ] } }); </script> </body> </html> #### 多種方式使用vue控制style樣式屬性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="vue.js"></script> <script src="node_modules/axios/dist/axios.js"></script> <script src="node_modules/lodash/lodash.js"></script> </head> <body> <div id="hdcms"> <h1 :style="{color:'red',fontSize:size+'px'}">后盾人</h1> <h2 :style="style">后盾人</h2> <h3 :style="[hdcms]">houdunren.com</h3> <input type="number" v-model="size"> </div> <script> var app = new Vue({ el: '#hdcms', data: { red: 'green', size: 16, style: { color: 'blue' }, hdcms:{ color:'yellow', backgroundColor:'blue' } } }); </script> </body> </html>