vue指令:v-text、v-html、v-bind、v-model、v-on、v-for、v-if、v-show、v-else-if 忘是亡心i 2022-12-12 13:49 204阅读 1赞 ### 导航 ### * v-text和v-html * v-bind * v-model * v-on * v-for * v-if和v-show * v-if 和 v-else-if # v-text和v-html # <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id = "app"> <!-- { {msg}} 这种插值表达式在网速慢的时候会插值闪烁 体验不是很友好,v-text、v-html是不会有闪烁的--> { {msg}} { {1+2}} <span v-html="msg"></span><br> <span v-text="msg"></span> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> new Vue({ el:"#app", data:{ msg:"<h1>hello</h1>" } }) </script> </body> </html> # v-bind # <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id = "app"> <!-- v-bind给html标签的属性绑定值 例:--> <a v-bind:href="link">gogogo</a> <!-- v-bind 给class,stale 进行了增强 根据实际数据动态展示 {class名:是否加上的值} --> <!-- v-bind 可以直接简写为 : 冒号,v-bind是属于单向绑定--> <span v-bind:class="{active:isActive,'text-danger':hasError}" v-bind:style="{color:color1,'font-size':size}">你好</span> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el:"#app", data: { link:"https://www.baidu.com", isActive:true, hasError:true, color1:"blue", size:"39px" }, }) </script> </body> </html> # v-model # <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 表单项,自定义组件 v-model属于双向绑定--> <div id="app"> 精通的语言: <input type="checkbox" v-model="language" value="java"/>java<br/> <input type="checkbox" v-model="language" value="php"/>php<br/> <input type="checkbox" v-model="language" value="python"/>python<br/> 我选中了{ {language.join("-")}} </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el:"#app", data:{ language:[] } }) </script> </body> </html> # 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> </head> <body> <div id="app"> <!-- 事件中直接写js片段 --> <button v-on:click="number++">点赞</button> <!-- 事件指定一个回调函数,必填是Vue实例中定义的函数 v-on 事件可以简写为@--> <button @click="cancle()">取消</button> <h1>有{ {number}}个赞</h1> <!-- 事件修饰符 --> <div style="border: 1px solid red; padding: 20px;" v-on:click.once="hello"> 大div <div style="border: 1px solid blue; padding: 20px;" @click.stop="hello()"> 小div<br> <a href="https:wwww.baidu.com" @click.prevent>去百度</a> </div> </div> <!-- 按键修饰符 @click.ctrl=单击键加ctrl键(同时) --> <input type="text" v-model="number" v-on:keyup.up="number+=2" @keyup.down="number-=2" @click.ctrl="number=10"/><br> 提示: </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el:"#app", data:{ number:1 }, methods: { cancle() { if (this.number > 0) { this.number-- } }, hello() { alert("点击了"); } }, }) </script> </body> </html> # v-for # <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <ul> <!-- 1、显示user信息:v-for = "item in items" --> <li v-for = "user in users"> { {user.name}} ==> { {user.gender}} ==> { {user.age}} </li> <br> <!-- 2、获取数组下标:v-for = (item,index) in items--> <li v-for = "(user,index) in users" v-if="user.gender == '女'"> 索引:{ {index}}={ {user.name}} ==> { {user.gender}} ==> { {user.age}} </li> <br> <!-- 3、遍历对象: v-for="value in object" v-for="(value,key) in object" v-for="(value,key,index) in object" --> <li v-for = "(user,index) in users"> 索引:{ {index}}={ {user.name}} ==> { {user.gender}} ==> { {user.age}} 每一个对象信息: <span v-for = "(v,key,index) in user"> 对象索引:{ {index}}= { {key}} == { {v}}; </span> </li> <br> </ul> <!-- 4、遍历的时候加上:key来区分不同数据,提高vue渲染效率 --> <ul> <li v-for="(num,index) in nums" :key="index"> { {num}} </li> </ul> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> new Vue({ el:"#app", data:{ users:[ {name:"ysh",gender:"男",age:21}, {name:"柳岩",gender:"女",age:18}, {name:"张三",gender:"男",age:26}, {name:"古力娜扎",gender:"女",age:23} ], nums:[1,2,2,3,4,5,6] } }) </script> </body> </html> # v-if和v-show # <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- v-if,顾名思义,条件判断,当得到结果为true时,所在的元素才会被渲染 v-show,当得到结果为true时,所在元素才会被显示。 show = !show : 赋值操作 --> <div id = "app"> <button v-on:click="show = !show">点我呀</button> <!-- 1、使用v-if显示 --> <h1 v-if="show">if=看到我...</h1> <!-- 2、使用v-show显示 --> <h1 v-show="show">show=看到我</h1> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el:"#app", data:{ show:true } }) </script> </body> </html> # v-if 和 v-else-if # <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id= "app"> <button v-on:click="random=Math.random()">点我呀</button> <br> <span>{ {random}}</span> <h1 v-if="random>=0.75"> 看到我啦?! >=0.75 </h1> <h1 v-else-if="random>=0.5"> 看到我啦?! >=0.5 </h1> <h1 v-else-if="random>=0.2"> 看到我啦?! >=0.2 </h1> <h1 v-else> 看到我啦?! <=0.2 </h1> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el:"#app", data:{ random:1 } }) </script> </body> </html>
相关 Vue指令 Vue指令 * v-text * v-html * v-show * v-if * v-else * v-else-if * v-for ... 迈不过友情╰/ 2024年04月17日 05:59/ 0 赞/ 89 阅读
相关 vue 指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> 谁借莪1个温暖的怀抱¢/ 2023年11月05日 00:52/ 0 赞/ 118 阅读
相关 Vue指令 一、Vue指令的规定 1. 所有的Vue指令必须以v-开头,后面带命令动词。 2. 指令的参数:v-指令动词.参数 3. 指令的修饰符:v-指令动词:修饰符 二 阳光穿透心脏的1/2处/ 2023年06月25日 11:29/ 0 赞/ 19 阅读
相关 Vue指令 v-text v-text的作用跟插值表达式是一样的,但是不同的地方在于:v-text会覆盖元素中原本的内容,插值表达式只会替换自己的这个占位符,不会把整个元素的内容清空 男娘i/ 2023年06月09日 07:59/ 0 赞/ 24 阅读
相关 Vue 指令 基本指令 (1)v-bind指令 语法格式1:单个语法格式 v-bind:attributeName=variable 以下是HTML代码: < 矫情吗;*/ 2023年06月06日 08:22/ 0 赞/ 26 阅读
相关 vue指令 总结 v-text v-text是一个渲染文本的指令 不能解析标签 会把标签当成字符串渲染在页面上 v-html v-html 也是一个渲染 电玩女神/ 2023年02月22日 13:56/ 0 赞/ 36 阅读
相关 vue指令 vue指令 一个正在努力爱好运动的前端 座右铭:越努力越幸运,越运动越健康,热爱编程,热爱运动。 -------------------- 文章目录 朱雀/ 2022年12月22日 06:12/ 0 赞/ 146 阅读
相关 vue指令 vue介绍 1.作者 尤雨溪(vue) \[阿里\] 3.0 2.vue概念 官网:[Vue.js][] 渐进式 JavaScript 框架 渐进式:主 偏执的太偏执、/ 2022年09月16日 06:05/ 0 赞/ 166 阅读
相关 Vue指令 本文笔记基于「千古壹号」的GitHub项目:https://github.com/qianguyihao/web 非商业用途自由转载,保持署名,注明出处! ------- 待我称王封你为后i/ 2021年11月17日 13:10/ 0 赞/ 438 阅读
相关 Vue指令 Vue指令 1. watch监听 在vue中watch就是时时刻刻的监听绑定的这个data模型数据,当这个数据发生变化的时候,watch就会被触发,自动的执行其中的 £神魔★判官ぃ/ 2021年07月24日 19:31/ 0 赞/ 523 阅读
还没有评论,来说两句吧...