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的要求是唯一不变,数值或字符串类型。

posted @   测试微思录-静水流深  阅读(4)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek智能编程
· 精选4款基于.NET开源、功能强大的通讯调试工具
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
点击右上角即可分享
微信分享提示