使用 Vue.js v-for 加载数据

最新推荐文章于 2024-04-20 06:32:12 发布

xingxingxingge

最新推荐文章于 2024-04-20 06:32:12 发布

阅读量2.3k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/xingxingxingge/article/details/79612653

版权

Vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Vue的基础参数:

el 为实例提供挂载元素值可以是 jQuery选择器 (就是Vue作用在那个地方)

data 存放数据

methods 存放方法

使用{{}} 插入值表达式插入字符 <td>{{item.name}}</td>

使用 v-on 绑定事件可简写成 @ <button @click="add()"></button> add() 方法在 methods 里面定义

使用 v-bind 绑定属性可简写成 : (冒号) <img :src="item.img"/>

引入 Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

新建一个Vue

<script>
  var myapp=new Vue({
    el:'#app',
    data:{
      lists:[
        {id: 1, name:'香蕉',price:'20'},
        {id: 2, name:'苹果',price:'18'},
        {id: 3, name:'西瓜',price:'16'}]
    }
  });
</script>

用v-for="(item,index) in lists"进行遍历循环lists这个数据,每次循环的内容放在item里面

<div id="app">
  <table border="1" align=center cellspacing="0">
    <caption align="center"><b>规格设置</b></caption>
    <tr>
      <th>名称</th>
      <th>价格</th>
    </tr>
    <tr v-for="(item,index) in lists" :key="item.id">
      <td>{{item.name}}</td>
      <td>{{item.price}}</td>
    </tr>
  </table>
</div>

:key="item.id" 提高渲染性能, 高效更新虚拟DOM, key是每一个节点的唯一标识, 可以让vue找到正确的位置插入新的节点

运行结果:

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<title>Vuetest</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <table border="1" align=center cellspacing="0">
      <caption align="center"><b>规格设置</b></caption>
      <tr>
        <th>名称</th>
        <th>价格</th>
      </tr>
      <tr v-for="(item,index) in lists" :key="item.id">
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
      </tr>
    </table>
  </div>
  
  <script>
    var myapp=new Vue({
      el:'#app',
      data:{
        lists:[
          {id: 1, name:'香蕉',price:'20'},
          {id: 2, name:'苹果',price:'18'},
          {id: 3, name:'西瓜',price:'16'}]
      },
      methods:{
        add:function () {
          
        }
      }
    });
  </script>
</body>
</html>

xingxingxingge

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用 Vue.js v-for 加载数据

引入 Vue.js<script src="https://cdn.jsdelivr.net/npm/vue"></script>新建一个Vue<script> var myapp=new Vue({ el:'#app', data:{ lists:[ {id: 1, name:'香蕉',price...
复制链接

扫一扫