2021-08-02 vue笔记-基础(二) 条件渲染,列表渲染,class和style绑定,表单数据

前端OnTheRun

已于 2022-10-15 11:52:08 修改

阅读量161

点赞数

分类专栏： vue学习笔记文章标签： vue if for 表单

于 2021-08-02 15:50:02 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/119326467

版权

本文详细介绍了Vue.js的基础知识，包括使用v-for进行嵌套遍历数组和对象，v-if与v-show的条件渲染，v-bind的不同方式绑定样式，以及单选按钮和复选框的处理。此外，还探讨了Vue中的防抖和节流技术，用于优化表单数据处理，降低无效触发，减轻服务器压力。

摘要由CSDN通过智能技术生成

文章目录

1.v-for实现嵌套遍历

代码:

<div id="app">
    <div v-for="(item,index) in person">
        我叫{
  {item.name}},我每天上午:
        <!-- 注:item.daily是把item取出来给第二层用 -->
        <div v-for="(val,key) in item.daily">
            {
  {val.am}}
        </div>
    </div>
</div>
<script>
    var app = new Vue({
     
        el:"#app",
        data:{
     
            person:[
                {
     
                    name:"张三",
                    daily:[
                        {
     am:"睡觉"},
                        {
     am:"看书"}
                    ]
                },
                {
     
                    id:2,
                    name:"李四",
                    daily:[
                        {
     am:"看视频"},
                        {
     am:"玩游戏"}
                    ]
                },
            ]
        }
    })
</script>

结果:

我叫张三,我每天上午:睡觉看书
我叫李四,我每天上午:看视频玩游戏

2.v-for遍历数组和遍历对象

代码:

<div id="app">
    <div v-for="(item,index) in arr">
        第{
  {index+1}}名是{
  {item}}
    </div>
    <div v-for="(value,key,index) in obj">
        第{
  {index+1}}栏信息:属性名:{
  {key}},属性值:{
  {value}}
    </div>
</div>
<script>
    new Vue({<