Vue12-列表渲染

最新推荐文章于 2023-12-12 15:24:49 发布
最新推荐文章于 2023-12-12 15:24:49 发布
阅读量107 收藏 1
点赞数
分类专栏： Vue2笔记 文章标签： vue.js javascript 前端 列表渲染
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A1066223647/article/details/125022798
版权

Vue12-列表渲染

文章目录

一、基本列表

v-for指令:

​ 1.用于展示列表数据

​ 2.语法：v-for=“(item, index) in xxx” :key=“yyy”

​ 3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>基本列表</title>
  <script type="text/javascript" src="../js/vue.js"></script>
 </head>
 <body>

  <!-- 准备好一个容器-->
  <div id="root">
   <!-- 遍历数组 -->
   <h2>人员列表（遍历数组）</h2>
   <ul>
    <li v-for="(p,index) of persons" :key="index">
     {{p.name}}-{{p.age}}
    </li>
   </ul>

   <!-- 遍历对象 -->
   <h2>汽车信息（遍历对象）</h2>
   <ul>
    <li v-for="(value,k) of car" :key="k">
     {{k}}-{{value}}
    </li>
   </ul>

   <!-- 遍历字符串 -->
   <h2>测试遍历字符串（用得少）</h2>
   <ul>
    <li v-for="(char,index) of str" :key="index">
     {{char}}-{{index}}
    </li>
   </ul>
   
   <!-- 遍历指定次数 -->
   <h2>测试遍历指定次数（用得少）</h2>
   <ul>
    <li v-for="(number,index) of 5" :key="index">
     {{index}}-{{number}}
    </li>
   </ul>
  </div>

  <script type="text/javascript">
   Vue.config.productionTip = false
   
   new Vue({
    el:'#root',
    data:{
     persons:[
      {id:'001',name:'张三',age:18},
      {id:'002',name:'李四',age:19},
      {id:'003',name:'王五',age:20}
     ],
     car:{
      name:'奥迪A8',
      price:'70万',
      color:'黑色'
     },
     str:'hello'
    }
   })
  </script>
</html>

二、key的原理

  1. 虚拟DOM中key的作用：
    key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
    随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

  2. 对比规则：

    ​ (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

    ​ ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！

    ​ ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

    ​ (2).旧虚拟DOM中未找到与新虚拟DOM相同的key

    ​ 创建新的真实DOM，随后渲染到到页面

  3. 用index作为key可能会引发的问题：

    1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:

      会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

    2. 如果结构中还包含输入类的DOM：

      会产生错误DOM更新 ==> 界面有问题。

  4. 开发中如何选择key?:

    1. 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

    2. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，

    使用index作为key是没有问题的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UWmSK96B-1653741579548)(C:\Users\LiuJiaduo\AppData\Roaming\Typora\typora-user-images\image-20220519154610483.png)]

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>key的原理</title>
  <script type="text/javascript" src="../js/vue.js"></script>
 </head>
 <body>

  <!-- 准备好一个容器-->
  <div id="root">
   <!-- 遍历数组 -->
   <h2>人员列表（遍历数组）</h2>
   <button @click.once="add">添加一个老刘</button>
   <ul>
    <li v-for="(p,index) of persons" :key="index">
     {{p.name}}-{{p.age}}
     <input type="text">
    </li>
   </ul>
  </div>

  <script type="text/javascript">
   Vue.config.productionTip = false
   
   new Vue({
    el:'#root',
    data:{
     persons:[
      {id:'001',name:'张三',age:18},
      {id:'002',name:'李四',age:19},
      {id:'003',name:'王五',age:20}
     ]
    },
    methods: {
     add(){
      const p = {id:'004',name:'老刘',age:40}
      this.persons.unshift(p)
     }
    },
   })
  </script>
</html>

三、列表过滤

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>列表过滤</title>
  <script type="text/javascript" src="../js/vue.js"></script>
 </head>
 <body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h2>人员列表</h2>
   <input type="text" placeholder="请输入名字" v-model="keyWord">
   <ul>
    <li v-for="(p,index) of filPerons" :key="index">
     {{p.name}}-{{p.age}}-{{p.sex}}
    </li>
   </ul>
  </div>

  <script type="text/javascript">
   Vue.config.productionTip = false
   
   //用watch实现
   //#region 
   /* new Vue({
    el:'#root',
    data:{
     keyWord:'',
     persons:[
      {id:'001',name:'马冬梅',age:19,sex:'女'},
      {id:'002',name:'周冬雨',age:20,sex:'女'},
      {id:'003',name:'周杰伦',age:21,sex:'男'},
      {id:'004',name:'温兆伦',age:22,sex:'男'}
     ],
     filPerons:[]
    },
    watch:{
     keyWord:{
      immediate:true,
      handler(val){
       this.filPerons = this.persons.filter((p)=>{
        return p.name.indexOf(val) !== -1
       })
      }
     }
    }
   }) */
   //#endregion
   
   //用computed实现
   new Vue({
    el:'#root',
    data:{
     keyWord:'',
     persons:[
      {id:'001',name:'马冬梅',age:19,sex:'女'},
      {id:'002',name:'周冬雨',age:20,sex:'女'},
      {id:'003',name:'周杰伦',age:21,sex:'男'},
      {id:'004',name:'温兆伦',age:22,sex:'男'}
     ]
    },
    computed:{
     filPerons(){
      return this.persons.filter((p)=>{
       return p.name.indexOf(this.keyWord) !== -1
      })
     }
    }
   }) 
  </script>
</html>

四、列表排序

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>列表排序</title>
  <script type="text/javascript" src="../js/vue.js"></script>
 </head>
 <body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h2>人员列表</h2>
   <input type="text" placeholder="请输入名字" v-model="keyWord">
   <button @click="sortType = 2">年龄升序</button>
   <button @click="sortType = 1">年龄降序</button>
   <button @click="sortType = 0">原顺序</button>
   <ul>
    <li v-for="(p,index) of filPerons" :key="p.id">
     {{p.name}}-{{p.age}}-{{p.sex}}
     <input type="text">
    </li>
   </ul>
  </div>

  <script type="text/javascript">
   Vue.config.productionTip = false
   
   new Vue({
    el:'#root',
    data:{
     keyWord:'',
     sortType:0, //0原顺序 1降序 2升序
     persons:[
      {id:'001',name:'马冬梅',age:30,sex:'女'},
      {id:'002',name:'周冬雨',age:31,sex:'女'},
      {id:'003',name:'周杰伦',age:18,sex:'男'},
      {id:'004',name:'温兆伦',age:19,sex:'男'}
     ]
    },
    computed:{
     filPerons(){
      const arr = this.persons.filter((p)=>{
       return p.name.indexOf(this.keyWord) !== -1
      })
      //判断一下是否需要排序
      if(this.sortType){
       arr.sort((p1,p2)=>{
        return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
       })
      }
      return arr
     }
    }
   }) 

  </script>
</html>

五、更新列表信息的一个问题

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>更新时的一个问题</title>
  <script type="text/javascript" src="../js/vue.js"></script>
 </head>
 <body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h2>人员列表</h2>
   <button @click="updateMei">更新马冬梅的信息</button>
   <ul>
    <li v-for="(p,index) of persons" :key="p.id">
     {{p.name}}-{{p.age}}-{{p.sex}}
    </li>
   </ul>
  </div>

  <script type="text/javascript">
   Vue.config.productionTip = false
   
   const vm = new Vue({
    el:'#root',
    data:{
     persons:[
      {id:'001',name:'马冬梅',age:30,sex:'女'},
      {id:'002',name:'周冬雨',age:31,sex:'女'},
      {id:'003',name:'周杰伦',age:18,sex:'男'},
      {id:'004',name:'温兆伦',age:19,sex:'男'}
     ]
    },
    methods: {
     updateMei(){
      // this.persons[0].name = '马老师' //奏效
      // this.persons[0].age = 50 //奏效
      // this.persons[0].sex = '男' //奏效
      // this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
      this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})
     }
    }
   }) 

  </script>
</html>

六、Vue监测数据改变的原理_对象

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>Vue监测数据改变的原理</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
 </head>
 <body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h2>学校名称：{{name}}</h2>
   <h2>学校地址：{{address}}</h2>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  const vm = new Vue({
   el:'#root',
   data:{
    name:'尚硅谷',
    address:'北京',
    student:{
     name:'tom',
     age:{
      rAge:40,
      sAge:29,
     },
     friends:[
      {name:'jerry',age:35}
     ]
    }
   }
  })
 </script>
</html>

七、模拟一个数据监测

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>Document</title>
 </head>
 <body>
  <script type="text/javascript" >

   let data = {
    name:'尚硅谷',
    address:'北京',
   }

   //创建一个监视的实例对象，用于监视data中属性的变化
   const obs = new Observer(data)  
   console.log(obs) 

   //准备一个vm实例对象
   let vm = {}
   vm._data = data = obs

   function Observer(obj){
    //汇总对象中所有的属性形成一个数组
    const keys = Object.keys(obj)
    //遍历
    keys.forEach((k)=>{
     Object.defineProperty(this,k,{
      get(){
       return obj[k]
      },
      set(val){
       console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
       obj[k] = val
      }
     })
    })
   }
   
   


  </script>
 </body>
</html>

八、Vue.set的使用

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>Vue监测数据改变的原理</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
 </head>
 <body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h1>学校信息</h1>
   <h2>学校名称：{{school.name}}</h2>
   <h2>学校地址：{{school.address}}</h2>
   <h2>校长是：{{school.leader}}</h2>
   <hr/>
   <h1>学生信息</h1>
   <button @click="addSex">添加一个性别属性，默认值是男</button>
   <h2>姓名：{{student.name}}</h2>
   <h2 v-if="student.sex">性别：{{student.sex}}</h2>
   <h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
   <h2>朋友们</h2>
   <ul>
    <li v-for="(f,index) in student.friends" :key="index">
     {{f.name}}--{{f.age}}
    </li>
   </ul>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  const vm = new Vue({
   el:'#root',
   data:{
    school:{
     name:'尚硅谷',
     address:'北京',
    },
    student:{
     name:'tom',
     age:{
      rAge:40,
      sAge:29,
     },
     friends:[
      {name:'jerry',age:35},
      {name:'tony',age:36}
     ]
    }
   },
   methods: {
    addSex(){
     // Vue.set(this.student,'sex','男')
     this.$set(this.student,'sex','男')
    }
   }
  })
 </script>
</html>

九、Vue监测数据改变的原理_数组

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>Vue监测数据改变的原理</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
 </head>
 <body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h1>学校信息</h1>
   <h2>学校名称：{{school.name}}</h2>
   <h2>学校地址：{{school.address}}</h2>
   <h2>校长是：{{school.leader}}</h2>
   <hr/>
   <h1>学生信息</h1>
   <button @click="addSex">添加一个性别属性，默认值是男</button>
   <h2>姓名：{{student.name}}</h2>
   <h2 v-if="student.sex">性别：{{student.sex}}</h2>
   <h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
   <h2>朋友们</h2>
   <ul>
    <li v-for="(f,index) in student.friends" :key="index">
     {{f.name}}--{{f.age}}
    </li>
   </ul>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  const vm = new Vue({
   el:'#root',
   data:{
    school:{
     name:'尚硅谷',
     address:'北京',
    },
    student:{
     name:'tom',
     age:{
      rAge:40,
      sAge:29,
     },
     friends:[
      {name:'jerry',age:35},
      {name:'tony',age:36}
     ]
    }
   },
   methods: {
    addSex(){
     // Vue.set(this.student,'sex','男')
     this.$set(this.student,'sex','男')
    }
   }
  })
 </script>
</html>

十、总结数据监视

Vue监视数据的原理：

  1. vue会监视data中所有层次的数据。

  2. 如何监测对象中的数据？

    ​ 通过setter实现监视，且要在new Vue时就传入要监测的数据。

    ​ (1).对象中后追加的属性，Vue默认不做响应式处理

    ​ (2).如需给后添加的属性做响应式，请使用如下API：

    ​ Vue.set(target，propertyName/index，value) 或

    ​ vm.$set(target，propertyName/index，value)

  3. 如何监测数组中的数据？

    ​ 通过包裹数组更新元素的方法实现，本质就是做了两件事：

    ​ (1).调用原生对应的方法对数组进行更新。

    ​ (2).重新解析模板，进而更新页面。

  4. 在Vue修改数组中的某个元素一定要用如下方法：

    ​ 1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

    ​ 2.Vue.set() 或 vm.$set()

    特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>总结数据监视</title>
  <style>
   button{
    margin-top: 10px;
   }
  </style>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
 </head>
 <body>

  <!-- 准备好一个容器-->
  <div id="root">
   <h1>学生信息</h1>
   <button @click="student.age++">年龄+1岁</button> <br/>
   <button @click="addSex">添加性别属性，默认值：男</button> <br/>
   <button @click="student.sex = '未知' ">修改性别</button> <br/>
   <button @click="addFriend">在列表首位添加一个朋友</button> <br/>
   <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/>
   <button @click="addHobby">添加一个爱好</button> <br/>
   <button @click="updateHobby">修改第一个爱好为：开车</button> <br/>
   <button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
   <h3>姓名：{{student.name}}</h3>
   <h3>年龄：{{student.age}}</h3>
   <h3 v-if="student.sex">性别：{{student.sex}}</h3>
   <h3>爱好：</h3>
   <ul>
    <li v-for="(h,index) in student.hobby" :key="index">
     {{h}}
    </li>
   </ul>
   <h3>朋友们：</h3>
   <ul>
    <li v-for="(f,index) in student.friends" :key="index">
     {{f.name}}--{{f.age}}
    </li>
   </ul>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  const vm = new Vue({
   el:'#root',
   data:{
    student:{
     name:'tom',
     age:18,
     hobby:['抽烟','喝酒','烫头'],
     friends:[
      {name:'jerry',age:35},
      {name:'tony',age:36}
     ]
    }
   },
   methods: {
    addSex(){
     // Vue.set(this.student,'sex','男')
     this.$set(this.student,'sex','男')
    },
    addFriend(){
     this.student.friends.unshift({name:'jack',age:70})
    },
    updateFirstFriendName(){
     this.student.friends[0].name = '张三'
    },
    addHobby(){
     this.student.hobby.push('学习')
    },
    updateHobby(){
     // this.student.hobby.splice(0,1,'开车')
     // Vue.set(this.student.hobby,0,'开车')
     this.$set(this.student.hobby,0,'开车')
    },
    removeSmoke(){
     this.student.hobby = this.student.hobby.filter((h)=>{
      return h !== '抽烟'
     })
    }
   }
  })
 </script>
</html>
ame:'tony',age:36}
     ]
    }
   },
   methods: {
    addSex(){
     // Vue.set(this.student,'sex','男')
     this.$set(this.student,'sex','男')
    },
    addFriend(){
     this.student.friends.unshift({name:'jack',age:70})
    },
    updateFirstFriendName(){
     this.student.friends[0].name = '张三'
    },
    addHobby(){
     this.student.hobby.push('学习')
    },
    updateHobby(){
     // this.student.hobby.splice(0,1,'开车')
     // Vue.set(this.student.hobby,0,'开车')
     this.$set(this.student.hobby,0,'开车')
    },
    removeSmoke(){
     this.student.hobby = this.student.hobby.filter((h)=>{
      return h !== '抽烟'
     })
    }
   }
  })
 </script>
</html>
MarxistVive
关注
专栏目录
07-利用循环实现列表的渲染.html
09-03
07-利用循环实现列表的渲染
12.列表渲染
s12345672的博客
08-17 328
列表渲染 1. 基本列表 条件渲染： 1.v-if 写法： (1).v-if="表达式" (2).v-else-if="表达式" (3).v-else="表达式" 适用于：切换频率较低的场景。 特点：不展示的DOM元素直接被移除。 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。 2.v-show 写法：v-show="表达式"
[vue3]vue3中引入class类的写法
bbt953的博客
11-14 6523
vue3中引入class类的写法
vue class的绑定
不靠谱的作曲家
12-30 1952
1.对象的绑定 基本用法 :class="{ 'active': isActive }" 判断是否绑定 :class="{'active':isActive==-1}" 或者 :class="{'active':isActive==index}" 2.绑定并判断多个 第一种（用逗号隔开） :class="{ 'active': isActive, 'sort': isSort }" 第二种（放...
vue学习小记-class类样式书写方式
cqy5071021的博客
05-07 1360
class类样式书写方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
Vue列表页渲染优化详解
08-29
在列表渲染中，通过`v-if`或`v-show`控制元素的显示，可以避免渲染不需要的元素。如果某些列表项在初始渲染时就不应显示，使用`v-if`可以延迟它们的创建。 4. **使用`key`属性**： 在`v-for`循环中提供`key`属性...
vue3.0 vue-quill-editor.rar
09-19
Vue3.0还引入了Teleport，它允许我们将DOM元素渲染到页面上的特定位置，极大地扩展了模板的布局可能性。 Vue-Quill-Editor是一款基于Quill的 Vue.js 富文本编辑器组件，提供了丰富的文本格式化选项，如字体、字号、...
vue-better-list-view:vue长列表按需渲染
05-18
vue长列表按需渲染， 使用 提供npm版本和umd版本 npm 安装 // install npm i vue-better-list-view --save-dev // in your project import listView from 'vue-better-list-view' 或 umd 引入 [removed][removed] ...
vue-virtual-scroll-grid：Vue 3的可重用组件，以高效的方式将具有大量项目（例如1000多个项目）的列表呈现为网格
02-15
Vue 3的虚拟滚动网格这是Vue 3的可重用组件，它以高效的方式将具有大量项目（例如1000多个项目）的列表呈现为网格。特征使用虚拟滚动/窗口化渲染项目，因此DOM节点数很少。 支持使用分页的API在后台加载项目。 支持...
学习vue-admin-template，优化了大量融入代码，添加中文注释
05-16
例如，使用计算属性替代watch，利用Vue的key属性优化列表渲染，或者使用async/await优化异步操作。 9. **测试与调试**：学习使用Jest或Mocha进行单元测试，以及Chrome开发者工具进行前端调试，确保代码质量和性能。...
vue中class的写法
m0_45219210的博客
04-10 2002
比如想给一个i标签添加一个class。 数组的写法 <i class="iconfont" :class="[style[type].icon]"></i> 当style[type].icon存在的时候就会自动添加上类名。 对象的写法 <i class="iconfont" :class="{'icon-warning':true}"></i> 当冒号后面为true的时候，会给标签加上类名，为false时则不会加 ...
vue动态class的写法
花生日记
05-24 2383
当我们创建了一个新的 class对象后，我们就可以给该对象赋值了，如果你的属性值是一个整数或者字符串，那么你可以将其直接赋值给变量，如果是字符串则可以赋值给字符串变量。首先我们需要定义一个变量来作为该函数的参数，然后我们可以通过下面的代码来查看： 上面的代码是将“submit”类型的变量定义为v-mount类型，并将其初始化为0,最后将这个变量赋值给了“submit”类型的变量。使用“return”来结束一个函数是非常简单的，因为“return”本身就是一个函数，它可以让你在函数执行完之后立即返回结果。
vue3之基础语法 动态class :class :style
weixin_43845137的博客
03-03 3367
目录vue3之基础语法基础的样式写法动态样式之 对象写法动态样式之 数组写法v-for循环v-model vue3之基础语法 基础的样式写法 动态样式之 对象写法 方法1 用ts定义当前对象的type数据类型 type style 定义当前的样式的数据 const style 定义当前显示的 数据 msg <template> <div> <div :style="style">{{ msg }}</div> </div>
Vue3-06-样式绑定-class绑定的写法总结
最新发布
northcastle的博客
12-12 1994
Vue3 中使用 class 实现样式绑定
面向对象的PHP
weixin_33698043的博客
07-19 154
类的实例（包括继承） &lt;?php // 父类 class Animal { public $name; public $age; // 构造函数，使用new操作符生成实例的时候自动调用 function __construct($name, $age) { $this-&gt;name = $name; ...
vue绑定class的三种写法
a791226606的博客
12-23 254
vue绑定class的三种写法
Vue列表渲染
qq_54334713的博客
06-20 1285
vue官方文档解读
5.Vue - 绑定class样式、style样式
weixin_51351637的博客
08-31 6779
绑定样式1.class样式写法：class=“xxx” xxx可以使字符串、对象、数组字符串法：适用于类名不确定，要动态获取对象法：适用于要绑定多个样式，个数不确定，名字不确定，但要动态决定用不用数组法： 适用于要绑定多个样式，个数确定，名字确定，但不确定用不用2.style样式：style=“{fontSize：xxx}” 其中xxx是动态值：style="[a,b]" 其中ab是样式对象，如下。...
使用Vue绑定class和style样式的几种写法
见证自己学习,成长的记录
03-28 1858
绑定样式：1 class样式写法：class=‘xxx’ xxx可以是字符串，对象，数组字符串写法适用于：类名不确定，要动态获取对象写法适用于：要绑定多个样式，个数不确定，名字也不确定数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用2 style样式:style=“fontSize:xxx”，其中xxx是动态值，fontSzie=font-size,如果只有一个单词正常写即可，如果多个需要使用驼峰命名:style=“[a,b]”，其中a,b是样式对象。
vue v-for列表渲染
07-08
在Vue中，v-for指令用于循环渲染数组或对象的数据，而key属性则是用来帮助Vue识别每个节点的唯一性，从而提高渲染性能的。当Vue更新DOM时，它会根据key值来判断哪些节点需要更新，哪些节点需要删除，哪些节点需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MarxistVive

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值