v-model
- <input name="chbsex" type="radio" value="male" v-model="sex">
-
<input id="txtnum" type="text" v-model.trim="account">
-
<input type="number" v-model.number="age">
-
<textarea v-model.lazy="otherInfo" name="" id="" cols="25" rows="10"></textarea>
-
<input id="txtnum" type="text" v-model.trim="account">
-
<input type="number" v-model.number="age">
v-for
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!-- 遍历数组 --> <ul> <li v-for="p in personList" :key="p.id"> {{p.id}}-{{p.name}}-{{p.age}} </li> <hr> <li v-for="(p,index) in personList" :key="index"> {{p.id}}-{{p.name}}-{{p.age}}-{{index}} </li> </ul> <hr> <!-- 遍历对象 --> <h2>轿车列表信息(遍历对象)：</h2> <ul> <li v-for="(value,k) in carList" :key="k"> {{k}}-{{value}} </li> </ul> <hr> <!-- 遍历字符串 使用较少--> <h2>遍历字符串-使用较少</h2> <ul> <li v-for="(char,index) in strInfo" :key="index"> {{char}}-{{index}} </li> </ul> <hr> <!-- 遍历指定次数 使用较少--> <h2>遍历指定次数-使用较少</h2> <ul> <li v-for="(number,index) of 3" :key="index"> {{number}}-{{index}} </li> </ul> <hr> |
v-if
- 作用是：根据表达式的真假切换元素的显示状态
- 本质是通过操纵dom元素来切换显示状态——表达式的值为true,元素存在于dom树中，为false,从dom树中移除
- 频繁的切换使用v-show,反之使用v-if,前者的切换消耗小
-
<h2 v-show="isShow">v-show=条件渲染学习笔记</h2>
-
<div v-if="n===1">Angular</div><div v-else-if="n===2">React</div><div v-else-if="n===3">Vue</div><div v-else>Angular + React + Vue</div>
-
注：v-if + v-show<br />1.使用频率高的用v-show,使用频率低的用v-if<br />2.v-if--在同时使用时，界面会判断所有v-if(判断所有v-if后才会结束)<br />3.在使用v-if时，可考虑同时使用v-if和v-else-if(条件满足，则return——认为是一组条件判断，中间不能有其他内容，否则将不打断)<br />
click
-
<button v-on:click="showInfo">点我提示哦</button><button @click="showInfo">点我也提示的哈</button>
-
<button @click="showParamsInfo($event,'我是参数666')">可入参提示哦</button>
-
<a v-bind:href="url" @click.prevent="showInfo">百度一下</a><!-- prevent 为事件修饰符 阻止默认行为 -->
-
<!-- 阻止事件冒泡 --><div @click="showInfo"><button v-on:click.stop="showInfo">点我提示哦</button><!-- <button @click.prevent.stop="showInfo">点我提示哦</button> --></div>
-
<!-- 事件只触发一次 --><button v-on:click.once="showInfo">点我提示一次哦</button>
-
<button @click="numbers.x++">点我x++</button>
v-text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-text</title> <script type="text/javascript" src="../Js/vue.js"></script></head><body> <div id="root"> <h3 style="color: chocolate;"> 1.v-bind:单向绑定解析表达式，可简写为 :xxx<br /> 2.v-model:双向数据绑定<br /> 3.v-for:遍历数组、对象、字符串<br /> 4.v-on:绑定事件监听，可简写为 @<br /> 5.v-if:条件渲染——动态控制节点是否存在<br /> 6.v-else：条件渲染——动态控制节点是否存在<br /> 7.v-show：条件渲染——空调控制节点是否展示<br /> 8.---------------v-text:---------------<br /> .作用：向其所在的节点中渲染文本内容 .与插值语法的区别：v-text会替换掉节点中的内容，而{{xxx}}不会 </h3> <hr> <div>{{name}}</div> <div v-text="name"></div> </div></body></html><script type="text/javascript"> //console.log(vm) Vue.config.productionTip = false const vm = new Vue({ el: '#root', data: { name: 'v-text 学习笔记' }, computed: { wetherInfo () { return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather () { }, }, })</script> |
博客内容主要用于日常学习记录，内容比较随意，如有问题，还需谅解！！！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本