v-text：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="./static/vue.min.js"></script></head><body> <div id="app" v-text="greeting"></div> <script> // 数据模板引擎： // v-开头的指令是帮助我们渲染数据用的 new Vue({ el:"#app", data:{ greeting:"Hello Vue", } }) </script></body></html>v-html：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="./static/vue.min.js"></script></head><body> <div id="app" v-html="greeting"></div> <script> // 数据模板引擎： // v-开头的指令是帮助我们渲染数据用的 new Vue({ el:"#app", data:{ greeting:"<h1>Hello Vue</h1>", } }) </script></body></html>v-for：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="./static/vue.min.js"></script></head><body> <div id="app"> <ul> <li v-for="aihao in funingbo">{{ aihao }}</li> </ul> <ul> <li v-for="student in students">姓名：{{ student.name }},年龄：{{ student.age }},爱好：{{ student.hobby}}</li> </ul> </div> <script> // 数据模板引擎： // v-开头的指令是帮助我们渲染数据用的 new Vue({ el:"#app", data:{ funingbo:["披黄袍","吃鸡","大鱼大肉","骑士"], students:[ { name:"张敏聪", age:28, hobby:"girls", }, { name:"徐卫星", age:35, hobby:"oldboy", }, { name:"赵岩", age:21, hobby:"sao", } ] } }) </script></body></html>v-if：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="./static/vue.min.js"></script></head><body> <div id="app"> <div v-if="role == ‘cainingning‘"> <h1>欢迎美女光临~~~</h1> </div> <div v-else-if="role == ‘juyingying‘"> <h1>欢迎美女再次光临~~~</h1> </div> <div v-else> <h1>gun</h1> </div> </div> <script> // 数据模板引擎： // v-开头的指令是帮助我们渲染数据用的 new Vue({ el:"#app", data:{ role:"cainingning" } }) </script></body></html>v-show：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="./static/vue.min.js"></script></head><body> <div id="app"> <div v-show="isShow">Hello Vue</div> </div> <script> // 数据模板引擎： // v-开头的指令是帮助我们渲染数据用的 let vm = new Vue({ el:"#app", data:{ isShow:false } }) </script></body></html>v-bind：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="./static/vue.min.js"></script> <style> .active { width: 500px; height: 500px; background-color: lawngreen; } </style></head><body> <div id="app"> <a v-bind:href="jingdong" >去京东</a> <div :class="{ active : isActive }"></div> <div :class="[ isActive ]"></div> </div> <script> // 数据模板引擎： // v-开头的指令是帮助我们渲染数据用的 let vm = new Vue({ el:"#app", data:{ jingdong:"https://www.jd.com", isActive:true, } }) </script></body></html>
原文地址：https://www.cnblogs.com/zhang-da/p/12172869.html
时间： 2024-08-29 10:24:29