刚接触vue,现在有一个需求需要将一个表的其中一项根据ID=1单独输出,之前都是遍历实现,想单独输出一项突然就迷茫了.
这是我的测试代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>JSON????</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<script src="vue.js"></script>
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<div id="main">
<table border=1>
<tr>
<td>id</td>
</tr>
<tr >
<td>{{rows}}</td>
</tr>
</table>
</div>
</body>
<script>
$(document).ready(function () {
$.getJSON("http://localhost/tools/VMPlatform/BackEnd/web/index.php?r=project/projects", function (result, status) {
var v = new Vue({
el: '#main',
data: {
rows: result
}
})
});
});
</script>
</html>
现在输出出来的样子是
我是想数据都获取到,下面“rows: result”这里不变,上面获取它的Name
{{rows.Name}}
如果你的rows是数组的, 也可以用遍历 加个 v-if="item.ID =1" 就行了
<td v-for="(e,i) in rows" v-if="e.ID == 1" >{{e.Name}}</td>
你这都不是VUE,用的还是jquery的写法,
<el-table :data="tableData">
<el-table-column label="row的ID">
<template slot-scope="scope">
<span>{{ scope.row.id }}</span>
</template>
</el-table-column>
<el-table-column label="row的name">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
</el-table>
<el-table :data="tableData">
<el-table-column label="row的其他1">
<template slot-scope="scope">
<span>{{ scope.row.其他1 }}</span>
</template>
</el-table-column>
<el-table-column label="row的其他2">
<template slot-scope="scope">
<span>{{ scope.row.其他2 }}</span>
</template>
</el-table-column>
</el-table>
<el-table :data="tableData">
<el-table-column label="row的其他3">
<template slot-scope="scope">
<span>{{ scope.row.其他3 }}</span>
</template>
</el-table-column>
<el-table-column label="row的其他4">
<template slot-scope="scope">
<span>{{ scope.row.其他4 }}</span>
</template>
</el-table-column>
</el-table>
<script>
let data = () => {
return {
//页面tableData数据
tableData: []
}
}
let getRows = function() {
let params = null
//封装的post请求
this.$api.post('localhost:8080/xx/xx', params, response => {
//这里替换成你自己的result
this.tableData = response.data.data
});
}
//初始化数据
export default {
data: data,
methods: {
getRows
},
mounted: function() {
this.getRows()
}
</script>