vue学习笔记-2
1.模板语法
文本插值
<template>
<p>{{ msg }}</p><br/>
<p>{{ num+1 }}</p><br/>
<p>{{ ok?"yes":"no" }}</p>
</template>
<script>
export default{
data(){
return{
msg:"模板语法",
num:1,
ok:false
}
}
}
</script>
2.属性绑定
通过v-bind指令可以给元素绑定属性,且设置属性时不能使用文本插值,v-bind可以简写只写后边的冒号省略v-bind
<template>
<p v-bind:class="testclass">{{ msg }}</p><br/>
<button :disabled="isbuttondisabled">按钮</button>
</template>
<script>
export default{
data(){
return{
msg:"测试",
testclass:"test",
isbuttondisabled:false
}
}
}
</script>
<style scoped>
.test{
color:red;
fontsize:30px;
}
</style>
3.条件渲染
v-if:条件表达式为真时才能被渲染;v-elseif可以多次使用;v-else所有条件不满足时才被渲染
v-show:仅仅是改变了元素的display属性
<template>
<p>条件渲染</p>
<p v-if="type=='A'">A</p>
<p v-else-if="type=='B'">B</p>
<p v-else-if="type=='C'">C</p>
<p v-else>不是A/B/C</p>
<p v-show="flag">show文本</p>
</template>
<script>
export default{
data(){
return{
type:'E',
flag:false
}
}
}
</script>
4.列表渲染
v-for指令可以用来渲染一个列表,要使用特殊语法:item in items,items是源数据的数组,item是迭代项的别名.
v-for也支持使用可选的第二个参数表示当前项的位置索引。另外,in也可以换成of,即item of items
v-for还可以用来遍历一个对象的所有属性
<template>
<div>列表渲染</div>
<div v-for="(item,index) in names">{{ item }}-{{ index }}</div>
<div v-for="item in students">{{ item.name }}:{{ item.age }}</div>
<div v-for="(item,index) of names">{{ item }}-{{ index }}</div>
<div>
<p v-for="(value,key,index) of userInfo">{{ value }}-{{ key }}-{{ index }}</p>
</div>
</template>
<script>
export default{
data(){
return{
names:["amy","tom","mandy"],
students:[{"name":"zhangsan","age":18},{"name":"lisu","age":20},{"name":"wangwu","age":21}],
userInfo:{
"name":"Monica",
"sex":"female",
"age":23
}
}
}
}
</script>
5.通过key管理状态
在列表循环时需要为循环的对象添加key属性减少性能消耗。且key的要求是唯一不变,数值或字符串类型。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek智能编程
· 精选4款基于.NET开源、功能强大的通讯调试工具
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?