vue中cdn引入axios，请求接口，渲染数据

浅浅的花香味﹌ 2023-02-10 03:44 16阅读 0赞

代码示例：

<!DOCTYPE html>
    <html>
    <head>
      <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
      <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
      <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    </head>
    <body>
      <div id="app">
        <v-app>
          <v-content>
            <v-container>vue中cdn引入axios,请求接口，渲染数据</v-container>
    		<div v-for="item in itemList">
    		    <span>{
       {item.organName}}</span>
    		    <span>{
       {item.name}}</span>
    		  </div>
          </v-content>
        </v-app>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
      <script>
        new Vue({
          el: '#app',
          vuetify: new Vuetify(),	  	 
    	  data () {
    	    return {
    	      itemList: []
    	    }
    	  },
    	  mounted () {
    	    this.getData()
    	  },
    	  methods: {
    	    getData () {
    	      axios.get('data.json').then(response => {
    	          console.log(response.data)
    			  this.itemList =response.data;
    	        },
    	        response => {
    	          console.log('error')
    	        }
    	      )
    	    }
    	  },	  
        })	
      </script>
    </body>
    </html>

data.json

[{
    	"organName": "22物联",
    	"sex": 1,
    	"name": "DDDDD",
    	"organId": 1,
    	"deviceId": "DDDD"
    }, {
    	"organName": "技术部",
    	"sex": 1,
    	"name": "手环测试",
    	"organId": 134,
    	"deviceId": "EAFA6CCF3CDD1"
    }, {
    	"organName": "物联",
    	"sex": 1,
    	"name": "测试9873",
    	"organId": 1,
    	"deviceId": "DFB55ECE9873"
    }, {
    	"organName": "办公室",
    	"sex": 1,
    	"name": "测试5B32",
    	"organId": 134,
    	"deviceId": "DA4F98E95B32"
    }, {
    	"organName": "11化工厂",
    	"sex": 1,
    	"name": "7890",
    	"organId": 1,
    	"deviceId": "68907"
    }, {
    	"organName": "fd物联",
    	"sex": 0,
    	"name": "测试12",
    	"organId": 1,
    	"deviceId": "DDDDDEEEEEEE"
    }, {
    	"organName": "fdf化工厂",
    	"sex": 1,
    	"name": "7890111",
    	"organId": 1,
    	"deviceId": "C03DC5A284D6"
    }, {
    	"organName": "fdfdf化工厂",
    	"sex": 1,
    	"name": "7890",
    	"organId": 1,
    	"deviceId": "E4682C45D19C"
    }, {
    	"organName": "会议部",
    	"sex": 1,
    	"name": "李71DC",
    	"organId": 143,
    	"deviceId": "D98A29DE71DC"
    }]

![format_png][]

页面显示如下：  
![format_png 1][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTM0M2NjOGUzNWFiMzhlYTIucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTI5NGFjNjNiMjgzMmYxNDIucG5n?x-oss-process=image/format,png