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>