vue基础---03模板语法
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改变页面颜色
