vue指令 朱雀 2022-12-22 06:12 144阅读 0赞 # vue指令 # 一个正在努力爱好运动的前端 座右铭：越努力越幸运，越运动越健康，热爱编程，热爱运动。 -------------------- ### 文章目录 ### * vue指令 * 主要讲解指令 * 一、v-bind（简写：） * 二、v-for * 三、v-if v-show * 四、v-model * 五、 filters文本格式化 * 六、v-html * 七、event(stop,prevent,once) -------------------- # 主要讲解指令 # v-bind（简写：） v-for v-if v-show v-model # 一、v-bind（简写：） # <!DOCTYPE html> <html> <head> <title></title> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#my', //element 元素 data:{ //数据 red:'red', d2:'d2', flag:true }, methods:{ //方法 action:function(i){ //return 'red' switch(i){ case 1: return 'red'; case 2: return 'blue'; default: return 'red'; } } } }) } </script> <style> .red { color:red; } .blue { color:blue; } .d1 { border:1px solid #666; } .d2 { background:#999;; } </style> </head> <body> <div id="my"> <!-- 单个引用 --> <div class="red">这是什么颜色</div> <div :class="red">这是什么颜色</div> <!--red变量 --> <div :class="'blue'">这是什么颜色</div> <!--blue样式名 --> <!-- 多个引用 --> <div :class="[red,'d1']">多个引用</div> <!-- red表示是变量 'd'表示是样式名 --> <div :class="[red,flag?'d1':d2]">多个引用</div> <!-- red表示是变量 'd'表示是样式名 --> <!-- 三目运算 --> <input type="checkbox" v-model="flag" /> <div :class="flag?'red':'blue'">这是什么颜色</div> <!-- 键值对 { 样式名:判断变量} --> <div :class="{'blue':flag}">这是什么颜色</div> <!-- 条件是函数 --> <div :class="action(2)">这是什么颜色</div> </div> </body> </html> 特别注意： 1.加了’ ’ 为字符串 不加为变量 2. : 绑定 变量 不再是值 # 二、v-for # <!DOCTYPE html> <html> <head> <title></title> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#my', //element 元素 data:{ //数据 arr:['a','b','c'], obj:{ id:1,name:'abc'}, lists:[ { name:'A',state:'0'}, { name:'B',state:'1'} ], n:5 }, methods:{ //方法 } }) } </script> </head> <body> <div id="my"> <ul> <!-- 遍历数组 v value i index --> <li v-for="(v,i) in arr" :key="i">{ { v}}---{ { i}}</li> </ul> <ul> <!-- 遍历对象v value k key 那个唯一是键--> <li v-for="(v,k) in obj">{ { v}}---{ { k}}</li> </ul> <ul> <!-- 遍历数组对象v { name:'A',state:'0'} i index--> <li v-for="(v,i) in lists">{ { v}}---{ { i}}</li> </ul> <ul> <!-- 遍历数值 v value i index--> <li v-for="(v,i) in n">{ { v}}---{ { i}}</li> </ul> <ul> <!-- 遍历数值 v value i index--> <li v-for="(v,i) in 8">{ { v}}---{ { i}}</li> </ul> </div> </body> </html> # 三、v-if v-show # <!DOCTYPE html> <html> <head> <title></title> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#my', //element 元素 data:{ //数据 flag:true, age:25 }, methods:{ //方法 fun:function(a,b){ if(a>b){ return true }else { return false } } } }) } </script> </head> <body> <div id="my"> <h1 v-if="flag">hello</h1> <h1 v-show="flag">hello</h1> <input type="checkbox" v-model="flag" /> <button :disabled="!flag">{ { flag?'选中':'未选中'}}</button> <input type="text" v-model="age" /> <h2 v-if="age>=30">已经30岁喽</h2> <h2 v-else-if="age>=20">已经20岁喽</h2> <h2 v-else>{ { age}}</h2> <h2 v-if="flag?age=20:age=30">{ { age}}</h2> </div> </body> </html> 特别注意：使用v-show 只是在html中加入样式display：block v-if是创建和删除dom # 四、v-model # <!DOCTYPE html> <html> <head> <title></title> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#my', //element 元素 data:{ //数据 text:'hello world!!!', flag:true, flag1:['vue'], flag2:['1'], box:[{ name:'北京',id:1},{ name:'上海',id:2},{ name:'广东',id:3},{ name:'湖北',id:4}], flag3:[2], radio:'0', selected:'打游戏', selected1:'1', text2:'' }, methods:{ //方法 } }) } </script> </head> <body> <div id="my"> <!-- 输入框 --> <input type="text" v-model="text" />{ { text}} <input type="text" :disabled="text=='a'" v-model="text" />{ { text}} <!-- 复选框 --> <div> <input type="checkbox" v-model="flag" />{ { flag}} </div> <!-- 复选框 组 展示的是什么，显示的就是什么--> <div> <input type="checkbox" v-model="flag1" value="html" />html <input type="checkbox" v-model="flag1" value="css"/>css <input type="checkbox" v-model="flag1" value="vue"/>vue <h2>{ { flag1}}</h2> <!-- [ "css", "vue" ] --> </div> <!-- 复选框 组--> <div> <input type="checkbox" v-model="flag2" value="0" />html <input type="checkbox" v-model="flag2" value="1"/>css <input type="checkbox" v-model="flag2" value="2"/>vue <h2>{ { flag2}}</h2> <!-- [ "0", "1" ] --> </div> <!-- 复选框 动态数据--> <div v-for="(v,i) in box" :key="v.id"> <input type="checkbox" v-model="flag3" :value="v.id" />{ { v.name}} </div> <h2>{ { flag3}}</h2> <!-- [ "0", "1" ] --> <!-- 单选框 --> <div> <input type="radio" v-model="radio" value="0"/>男 </div> <!-- 单选框 组 name相同表一个组的--> <div> <input type="radio" v-model="radio" name="test" value="0"/>男 <input type="radio" v-model="radio" name="test" value="1"/>女 <h2>{ { radio}}</h2> </div> <!-- 下拉框 --> <div> <select v-model="selected"> <option>唱歌</option> <option>跳舞</option> <option>打游戏</option> </select> <h1>{ { selected}}</h1> </div> <div> <select v-model="selected1"> <option value="0">唱歌</option> <option value="1">跳舞</option> <option value="2">打游戏</option> </select> <h1>{ { selected1}}</h1> </div> <div> <select v-model="selected1"> <option v-for="(v,i) in box" :key="v.id" :value="v.id">{ { v.name}}</option> </select> <h1>{ { selected1}}</h1> </div> <!-- 修饰符 --> <!-- lazy 在input光标离开时值的改变 --> <input type="text" v-model.lazy="text2" />{ { text2}} <!-- trim 自动过滤首尾空格 --> <input type="text" v-model.trim="text2" />{ { text2}} </div> </body> </html> # 五、 filters文本格式化 # <!DOCTYPE html> <html> <head> <title></title> <script src="vue.js"></script> <script> window.onload=function(){ Vue.filter('addZero',function(data){ //全局过滤器 return data<10 ?'0'+data:data; }); //使用二个地方：表达式{ {}}，v-bind new Vue({ el:'#my', //element 元素 data:{ //数据 id:1, input:3.14159, items:[{ name:'a',type:1},{ name:'b',type:2},{ name:'c',type:1}], curTime:'1605791712' }, methods:{ //方法 }, filters:{ //局部过滤器 number(data,n){ return data.toFixed(n) }, typeFilter(type){ // if(type==1){ // return '启动' // }else { // return '关闭' // } switch(type){ case 1: return '启动'; case 2: return '关闭'; default: return type; } }, timeFilter(data){ var date = new Date(data*1000); //转为国际时间 //2020-11-19 var y = date.getFullYear()+'/'; var m = date.getMonth()+1+'/'; var d = date.getDate(); return y+m+d; } } }) } </script> </head> <body> <div id="my"> <h1>{ { id | addZero}}</h1> <h1 :id="id | addZero">{ { id}}</h1> <div> <!-- 过滤器传参 --> <h1>{ { input | number(3)}}</h1> <ul> <li v-for="(v,i) in items" :key="i">{ { v.type | typeFilter}}</li> </ul> <!-- 时间戳 --> <h1>{ { curTime |timeFilter }}</h1> </div> </div> </body> </html> # 六、v-html # <!DOCTYPE html> <html> <head> <title></title> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#my', //element 元素 data:{ //数据 title:'hello world', html:'<h1>hello html</h1>' }, methods:{ //方法 } }) } </script> <style> /* v-cloak 解决浏览器闪烁 配置CSS格式，否则不生效 */ [v-cloak] { display:none; } </style> </head> <body> <div id="my"> <!-- v-cloak 解决浏览器闪烁 --> <div v-cloak>{ { title}}</div> <div v-text="title"></div> <div v-html="html"></div> </div> </body> </html> # 七、event(stop,prevent,once) # <!DOCTYPE html> <html> <head> <title></title> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#my', //element 元素 data:{ //数据 name:'签到' }, methods:{ //方法 action1(){ console.log('d1') }, action2(){ console.log('d2') }, action3(e){ console.log('d3'); // e.stopPropagation(); //阻止事件冒泡 }, open(){ console.log('open'); }, sign(){ console.log('sign'); this.name = '已签到'; } } }) } </script> </head> <body> <div id="my"> <div @click="action1()">d1 <div @click="action2()"> d2 <div @click="action3($event)">d3</div> <!-- 阻止事件冒泡 .stop--> <div @click.stop="action3()">d4</div> <a href="http://www.baidu.com" @click.prevent.stop="open()">open</a> </div> </div> <div> <!-- 取消事件的默认动作 .prevent --> <a href="http://www.baidu.com" @click.prevent="open()">open</a> </div> <div> <!-- 只执行一次 签到 --> <button @click="sign()">{ { name}}</button> <button @click.once="sign()">{ { name}}</button> </div> </div> </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 赞/ 88 阅读
相关 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 赞/ 17 阅读
相关 Vue指令 v-text v-text的作用跟插值表达式是一样的，但是不同的地方在于：v-text会覆盖元素中原本的内容，插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空 男娘i/ 2023年06月09日 07:59/ 0 赞/ 21 阅读
相关 Vue 指令 基本指令 （1）v-bind指令 语法格式1：单个语法格式 v-bind:attributeName=variable 以下是HTML代码： < 矫情吗；*/ 2023年06月06日 08:22/ 0 赞/ 21 阅读
相关 vue指令 总结 v-text v-text是一个渲染文本的指令 不能解析标签 会把标签当成字符串渲染在页面上 v-html v-html 也是一个渲染 电玩女神/ 2023年02月22日 13:56/ 0 赞/ 30 阅读
相关 vue指令 vue指令 一个正在努力爱好运动的前端 座右铭：越努力越幸运，越运动越健康，热爱编程，热爱运动。 -------------------- 文章目录 朱雀/ 2022年12月22日 06:12/ 0 赞/ 145 阅读
相关 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 赞/ 520 阅读
迈不过友情╰
朱雀
￡神魔★判官ぃ
还没有评论，来说两句吧...