如何用Vue实现选项卡效果以及Vue知识点
概念:Vue是渐进式 JavaScript框架,用于构建用户界面的渐进式框架。Vue的创始人是尤雨溪,2014年Vue.js发布→2016年Vue2.x发布⭐→2022年Vue3.x发布。虽然现在Vue3已经发布,但是还是要把Vue2学会,Vue2是很重要的,建议学完Vue2再学Vue3。vue的官网Vue官网。
<div id="app">
<h1>选项卡</h1>
<button @click="num=1" :class="num==1?'active':''">Vue</button>
<button @click="num=2" :class="num==2?'active':''">React</button>
<button @click="num=3" :class="num==3?'active':''">angular</button>
<div class="block" v-if="num==1">
Vue的文章列表
</div>
<div class="block" v-if="num==2">
React的文章列表
</div>
<div class="block" v-if="num==3">
angular的文章列表
</div>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
num: 1
}
})
</script>
css代码如下所示
<style>
.block {
width: 400px;
height: 400px;
border: 1px solid pink;
}
.active {
color: pink;
font-weight: 700;
}
</style>
此效果的实现主要利用了v-on v-if实现选项卡的切换 以及:class实现点击之后颜色的改变
写在中间 引入Vue的相关知识点
1.什么是Vue?
概念:Vue是渐进式 JavaScript框架,用于构建用户界面的渐进式框架。
Vue的创始人是尤雨溪,2014年Vue.js发布→2016年Vue2.x发布⭐→2022年Vue3.x发布。
虽然现在Vue3已经发布,但是还是要把Vue2学会,Vue2是很重要的,建议学完Vue2再学Vue3。
vue的官网Vue官网
2.如何使用Vue
有两种方式 :1.直接引用script 2.安装脚手架
导入与实例化
1. 模板:
<div id="app">
<h1>{{msg}}</h1>
</div>
2. 引入:<script src="./js/vue.js"></script>
3.实例化⭐:❗❗❗Vue 首字母大写
new Vue({
el: "#app", //指定模板返回(element)
data: {
msg: "你好vue"
}, //指定数据
})
3.Vue模板语法
指令: 指令是带有 v- 前缀的特殊 attribute,指令的属性值预期是单个 JavaScript 表达式。
作用:指令是联系模板与vue实例的桥梁,如下图
特点:可以渲染实例的值 v-text="msg"
数学运算 var-text="msg.length"
使用js表达式 v-text="msg.length"
如果是文本需要加单引号 v-text=" '我在中国,+‘msg"
1.文本渲染指令
- {{}}
- v-text文本渲染指令
- v-html html文本渲染指令
2.条件渲染指令
- v-if
- v-else
- v-else-if
- v-show
面试题v-if与v-show区别⭐
相同点:都是用来控制显示与隐藏
区别:v-if是通过dom操作(注释掉了)实现隐藏,v-show通过css方式(display:none)隐藏
频繁切换用v-show反之少量切换v-if
3.遍历指令v-for
作用:可以对字符串,数字,列表,对象进行遍历
eg:<p v-for="(item,index) in list" v-key="item">{{index+1}]-{{item}]
item 遍历的元素(自定义的名称) index遍历的下标(键名) list被遍历的数据
v-key 值必须唯一,为了更好的优化渲染列表
更多推荐
所有评论(0)