前端 Vue框架学习实例(六)
2021/7/6 23:06:09
本文主要是介绍前端 Vue框架学习实例(六),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1.事件监听
- v-on的基本使用
语法糖的写法@。。。实现一个简单计数器。
<body> <div id="app"> <h2>{{message}}</h2> <button @click="increment">+</button> <button @click="decrement">-</button> </div> <script> const app = new Vue({ el: "#app", data: { message: 0 }, methods: { increment() { this.message++ }, decrement() { this.message-- } } }) </script> </body>
- v-on的参数
@click="increment"
@click="increment()
@click="btn2click(10)
@click="btn3click(123,$event)
<body> <div id="app"> <h2>{{message}}</h2> <!-- -------------------------------------------------------- --> <button @click="increment">1</button> <button @click="increment()">2</button> <!-- -------------------------------------------------------- --> <button @click="btn2click(10)">3</button> <!-- -------------------------------------------------------- --> <button @click="btn3click(123,$event)">4</button> <!-- -------------------------------------------------------- --> </div> <script> const app = new Vue({ el: "#app", data: { message: 0 }, methods: { increment() { this.message++ }, btn2click(event) { console.log(event); this.message += event }, btn3click(abc, event) { console.log(abc, event); // this.message += event } } }) </script> </body>
- v-on的修饰符
stop修饰符,阻止冒泡。
<button @click.stop="butclickstop">添加stop</button>
.prevent修饰符,阻止自动提交
<form action="baidu">
<input type="submit" value="提交添加prevent" @click.prevent="subclickprevent">
</form>
键盘修饰符
<input type="text" @keyUp.enter="keyup">
.once只触发一次
<button @click.once="btn2once">只触发一次</button>
2.条件判断
- v-if的基本使用
最基础的判断操作
<h2> <p v-if="score>90">优秀</p> <p v-else-if="score>70">良好</p> <p v-else-if="score>60">及格</p> <p v-else>不及格</p> </h2>
在使用这种判断的时候,也可以使用计算属性computed
computed: { result() { let showScore = ''; if (this.score > 90) { showScore = '优秀' } else if (this.score > 70) { showScore = '良好' } else if (this.score > 60) { showScore = '及格' } else { showScore = '不及格' } return showScore } }
- v-show和v-if的对比
v-if 当条件为false时,不会存在于DOM中
v-show 当条件为false时,添加display:none;
<body> <div id="app"> <!-- v-if 当条件为false时,不会存在于DOM中 v-show 当条件为false时,添加display:none; --> <h2 id="aaa" v-if="isShow">{{message}}</h2> <h2 id="bbb" v-show="isShow">{{message}}</h2> <!-- 在显示和隐藏切换频率很高,使用v-show --> </div> <script> const app = new Vue({ el: '#app', data: { message: '你好!', isShow: true } }) </script> </body>
- 条件渲染案例
点击按钮,切换账户的类型
思路:
- 写上两组账号类型的标签
- 使用v-if,如果isuser=true,则显示用户账号;默认是用户账号。
- 给按钮绑定点击事件,对isuser取反
- 添加key解决复用
<body> <div id="app"> <span v-if="isUser"> <label for="username">用户账号</label> <!-- 添加Key解决复用问题 --> <input type="text" id="username" placeholder="用户账号" key="username"> </span> <span v-else> <label for="email">用户邮箱</label> <input type="text" id="email" placeholder="用户邮箱" key="eamil"> </span> <button @click="isUser = !isUser">切换类型</button> </div> <script type="text/javascript"> let app = new Vue({ el: '#app', data: { isUser: true } }) </script> </body>
3.循环遍历
- v-for遍历数组
<body> <div id="app"> <!-- 在遍历过程中,没有使用索引值(下标值) --> <ul> <li v-for="item in names">{{item}}</li> </ul> <hr> <!-- 在遍历过程中,使用索引值(下标值) --> <ul> <li v-for="(item,index) in names">{{index +1}}.{{item}}</li> </ul> </div> <script> const app = new Vue({ el: '#app', data: { names: ['张三', 'krbe', 'james', 'jack'] } }) </script> </body>
- v-for遍历对象
<body> <div id="app"> <!-- 在遍历对象过程中,如果只是获取一个值,那么获取到的是value --> <ul> <li v-for="item in info">{{item}}</li> </ul> <hr> <!-- 在遍历对象过程中,获取key和value (value,key)--> <ul> <li v-for="(value,key) in info">{{key}}:{{value}}</li> </ul> <hr> <!-- 在遍历对象过程中,获取key和value 和index (value,key,index)--> <ul> <li v-for="(value,key,index) in info">{{index}}---{{key}}---{{value}}</li> </ul> </div> <script> const app = new Vue({ el: '#app', data: { info: { name: '张三', age: 18, height: 888 } } }) </script> </body>
这篇关于前端 Vue框架学习实例(六)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南