vue基礎---03模板語法
阿新 • • 發佈：2021-09-13
00.v-once(用於一次性資料，固定資料)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script> </head> <body> <!-- 通過使用 v-once 指令，你也能執行一次性地插值，當資料改變時，插值處的內容不會更新。--> <div id="app"> <h3>{{mag}}</h3> <h3 v-once>{{mag}}</h3> </div> <script> var app=new Vue({ el:'#app', data:{ mag:"Vue 前端" } })</script> </body> </html> 一次性插入，第二次不能修改，可以通過控制檯修改mag的值試一試
01.v-html(輸出顯示html格式)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>蝴蝶教程(jc2182.com)</title> <script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script> </head> <body> <div id="app"> <h1 v-html="htmlTxt"></h1> </div> <script> var vm = new Vue({ el: '#app', data: { htmlTxt: '<span>這個是div</span>' } }); </script> </body> </html> 雙大括號會將資料解釋為普通文字，而非 HTML 程式碼。為了輸出真正的 HTML，你需要使用 v-html 指令：
02.v-bin(動態地切換class)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #login{background:pink;} #register{background:red;} </style> <script src="../js/vue.js"></script> </head> <body> <div id="app"> 當你給src新增v-bind時,他就知道，是要給src動態繫結，此時imgURL就是一個變數如果沒有v-bind，imgURL就是一個字串; 語法糖的寫法就是把v-bind省略，直接寫： <img v-bind:src="imgURL"></img> </div> <script> var app=new Vue({ el:'#app', data:{ imgURL:'https://img.alicdn.com/tfs/TB1MaLKRXXXXXaWXFXXXXXXXXXX-480-260.png' } }) </script> </body> </html>
03.表示式應用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> {{firstname+lastname}} </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ firstname:"張", lastname:"三" } }) </script> </body> </html>
04.三目運算子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> {{isVip?"歡迎vip使用者":"歡迎普通使用者"}} </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ isVip:"true" } }) </script> </body> </html>
05.v-on(事件指令)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> 事件繫結 <div id="app"> <button v-on:click="changeBg">改變背景</button> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", methods:{ changeBg:function(){ document.body.style.background="pink"; } } }) </script> </body> </html> 通過click改變頁面顏色