可以在html中執行vue
阿新 • • 發佈：2019-02-16
<span style="font-size:14px;"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HelloWorld</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdn.bootcss.com/Sortable/1.6.0/Sortable.js"></script> </head> <body> <div id="app"> <el-table :data="tableData"stripe style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> <el-table-columnprop="upload_img" label="圖片"> <template scope="scope" > <img :src="scope.row.upload_img" width="120" height="80" onload="formatter_upload_img('scope.row.upload_img');" /> </template> </el-table-column> </el-table> </div> <script> var testVue = new Vue({ el:'#app', data(){ return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄', upload_img:"http://img.shein.com/images2/2018/05/09/15258522023136879796.png" }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區金沙江路 1517 弄', upload_img:"http://img.shein.com/images2/2018/05/09/15258522023136879796.png" }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀區金沙江路 1519 弄', upload_img:"http://img.shein.com/images2/2018/05/09/15258522023136879796.png" }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀區金沙江路 1516 弄', upload_img:"http://img.shein.com/images2/2018/05/09/15258522023136879796.png" }] } }, }); function formatter_upload_img(value){ console.log("########formatter_upload_img") console.log(value) // console.log(scope.row) //return row.date == "2016-05-04" ? '男' : row.sex == 0 ? '女' : '未知'; //格式化是針對表格內容即使data資料 // var newDate = row.date== "" ? "-" : row.date.replace(/-/g,"/") // return newDate }; </script> </body> </html></span>