Vue—指令v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-cloak、v-on 逃离我推掉我的手 2023-06-06 03:41 10阅读 0赞 ### 1.v-text(文本插值) ### <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <span v-html ="vtext"></span> <span>{ {vtext}}</span> </div> </body> </html> <script> var vm = new Vue({ el: '#app', data: { vtext : 'aaa', vhtml : '<span>{ {vtext}}</span>', } }) </script> 可以使用\{ \{\}\}代替v-text ### 2.v-html(普通HTML插入) ### <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <span>{ {vtext}}</span> <div v-html="vhtml"></div> </div> </body> </html> <script> var vm = new Vue({ el: '#app', data: { vtext : 'aaa', vhtml : '<span>aaa</span>', } }) </script> ### 3.v-show(显示或隐藏标签) ### 有v-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的CSS属性display。 <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1 v-if="awesome">Vue is awesome!</h1> </div> </body> </html> <script> var vm = new Vue({ el: '#app', data: { vshow : false, } }) </script> ### 4.v-if、v-else、v-else-if(表达式的值的真假条件渲染元素) ### 说明： v-if、v-else、v-else-if指令用于条件性地渲染DOM,当结果是假时Dom不会生成, 而v-show只是简单地切换元素的CSS属性display。 v-else元素必须紧跟在带v-if或者v-else-if 的元素的后面，否则它将不会被识别。 <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 单独使用v-if --> <h1 v-if="vif">中国</h1> <!-- 使用v-if和v-else v-else元素必须紧跟在带v-if或者v-else-if的元素的后面，否则它将不会被识别。--> <h1 v-if="vif2">中国</h1> <h1 v-else>其他</h1> <!-- 使用v-if、v-else-if和v-else组合使用 --> <h1 v-if="type == '中国'">中国</h1> <h1 v-else-if="type == '美国'">美国</h1> <h1 v-else-if="type == '俄罗斯'">俄罗斯</h1> <h1 v-else>其他</h1> </div> </body> </html> <script> var vm = new Vue({ el: '#app', data: { vif : true, vif2:false, type:'日本' } }) </script> ### 5.v-for(基于源数据多次渲染元素) ### <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="item in vfors"> { { item.message }} </li> </ul> <ul> <li v-for="(item,index) in vfors"> { { index + "." +item.message }} </li> </ul> </div> </body> </html> <script> var vm = new Vue({ el: '#app', data: { vfors : [ { message: 'Foo' , id = 1 }, { message: 'Bar' , id = 2 } ], } }) </script> 可以用of替代in作为分隔符 <ul> <li v-for="item of vfors"> { { item.message }} </li> </ul> 当Vue正在更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。 如果需要重新排序现有元素，就必须提供一个唯一key属性 <ul> <li v-for="item in vfors" v-bind:key="item.id"> { { item.message }} </li> </ul> ### 6.v-on(绑定事件监听器) ### v-on既能监听原生DOM事件，也可以监听自定义组件触发的自定义事件。 v-on缩写为@ <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- v-on绑定点击事件 --> <button v-on:click="click1">v-on绑定点击事件</button> <!-- v-on缩写 --> <button @click="click1">v-on缩写</button> <!-- 传参 --> <button @click="click2('bbbbb')">传参bbbbb</button> </div> </body> </html> <script> var vm = new Vue({ el: '#app', methods:{ click1:function(){ alert("aaaaa"); }, click2:function(value){ alert(value); } } }) </script> ### 7.v-bind(动态地绑定特性) ### <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- v-bind绑定href --> <a v-bind:href="url" target="_blank">{ {url}}</a><br/> <!-- v-bind缩写： --> <a :href="url" target="_blank">v-bind缩写：</a><br/> <!-- 绑定内联样式style --> <span :style="styleobj">绑定内联样式style：</span><br/> <!-- 绑定class --> <span :class=" { classObj : isclassObj }">绑定class：</span><br/> </div> </body> </html> <style > .classObj { color: red; font-size: 50px; } </style> <script> var vm = new Vue({ el: '#app', data:{ url : "http://www.baidu.com", styleobj:{ color:'red', }, isclassObj:true, } }) </script> ### 8.v-model(数据双向绑定) ### <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input v-model="message" placeholder="edit me"> <p>message is: { { message }}</p><br/> <input type="checkbox" v-model="checked"> <label for="checkbox">{ { checked }}</label><br/> <select v-model="selected"> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: { { selected }}</span><br/> </div> </body> </html> <script> var vm = new Vue({ el: '#app', data:{ message : "aaaaaa", //初始值 checked:true, selected:'C', } }) </script> ### 9.v-slot ### ### 10.v-pre ### ### 11.v-cloak ### ### 12.v-once ### 只渲染元素和组件一次。随后的不在重新渲染。 <span v-once>This will never change: { {msg}}</span> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70][] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70]: /images/20230601/91ec4a8c917a49b78f635c49cdbb4dc1.png
相关 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"> 谁借莪１个温暖的怀抱￠/ 2023年11月05日 00:52/ 0 赞/ 117 阅读
相关 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 赞/ 34 阅读
相关 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 阅读
迈不过友情╰
朱雀
￡神魔★判官ぃ
还没有评论，来说两句吧...