2.屬性動態綁定 · 程序員開發筆記

[TOC] #### 1.屬性動態綁定 <!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> .c { color: green!important; } </style> </head> <body> <div id="xy">   <h1 :class="'c'" :id="'title'">{{title}}</h1> </div> <script type="text/javascript"> var app = new Vue({ el: "#xy", data: { title: "hello Vue!", } }); </script> </body> </html> #### 2.雙向綁定和只綁定一次 <!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> </head> <body> <div id="xy"> <h1>{{title}}</h1>  <h3 v-once="">{{title}}</h3>  <input type="text" v-model="title" /> </div> <script type="text/javascript"> var app = new Vue({ el: "#xy", data: { title: "hello Vue!", } }); </script> </body> </html> #### 3.解決vue和smarty沖突等問題,原樣輸出 <!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>解決vue和smarty沖突等問題,原樣輸出</title> </head> <body> <div id="xy">  <h1 v-text="title"></h1>  <h3 v-html="html"></h3> </div> <script type="text/javascript"> var app = new Vue({ el: "#xy", data: { title: "hello Vue!", html: "<h1 style=\"color:green\">原樣輸出</h1>", } }); </script> </body> </html>