Vue---v-for渲染和样式绑定

v-for渲染和样式绑定

    • 1. 列表渲染
    • 2. style绑定
    • 3. 动态绑定类名

1. 列表渲染

v-for指令:用于列表渲染和遍历数据
v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。
Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做可以使 Vue 变得非常快。但是有些时候,我们却不希望vue复用,这时候Vue 为你提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的 key

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
	<div id="app">
    <ul>
      <li v-for="(item,index) in animal" :key="item">{
   {
   item}}---{
   {
   index}}</li>
    </ul>
    <ul>
      <li v-for="(key,value,index) in obj" :key="index">{
   {
   key}}---{
   

你可能感兴趣的:(Vue,vue.js,javascript,前端)