💎一站式轻松地调用各大LLM模型接口，支持GPT4、智谱、星火、月之暗面及文生图 广告
[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"> <!--动态绑定一个class为c的样式，动态绑定一个id--> <!--<h1 v-bind:class="'c'" v-bind:id="'title'">{{title}}</h1>--> <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"> <!--解决vue和smarty冲突等问题--> <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>