可以在html中运行vue

<span style="font-size:14px;"><!DOCTYPE html><html><head><meta charset="utf-8"><title>HelloWorld

zhangyulin54321

6865人浏览 · 2018-05-27 17:08:14

zhangyulin54321 · 2018-05-27 17:08:14 发布

<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-column
      prop="upload_img"
      label="图片">

          <template scope="scope" >
            <img :src="scope.row.upload_img" width="120" height="80" οnlοad="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>