Vue:安装 el data

1,下载安装vue.js

下载安装git

打开git输入:npm install vue

2,

el:提供一个在页面上已存在的DOM元素作为vue实例的挂载目标

3,

data:定义所需要的数据 data的属性能够相应数据变化 会被混合在实例中

4,

v-for 循环列表数据

语法:v-for='值,下标 in 数组'

<li v-for ='item(变量),index in arr(不固定)'

5,代码展示

<body>

<div  id='itany'>    //class

<table border='1' cellspacing='0'>
 <thead>
 <tr>
// th与 td区别:加粗字体
          < th> 编号</th>
          <th>名称</th>
          <th>单价</th>            
    </tr>

            </thead>

          <tbody>

            <tr    v-for='value in arr'>

                <td>{{value.num}}</td>

                <td>{{value.pname}}</td>

                <td>{{value.price}}</td>

            </tr>

        </tbody>

</table>

</div>

<script  src='./js/vue.js'></script>

  <script>

    new Vue({    //提供全局vue

        //写参数

      el:'#itany',
      data:{
         arr:[
              {num:1,pname:'香蕉',price:3},
              {num:2,pname:'苹果',price:2},
              {num:3,pname:'鸭梨',price:1}
      ]
     }
 })

</script>

</body>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容