在springboot项目html中直接使用vue遇到的问题

往事不堪回首..

已于 2022-01-22 12:13:02 修改

阅读量1.4k

点赞数

文章标签： vue.js html spring boot

于 2022-01-22 10:45:40 首次发布

本文链接：https://blog.csdn.net/qq3892997/article/details/122633942

版权

1. 正常使用viewer插件进行图片操作，以下是能正常跑的代码：

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<title>viewer.js演示</title>
<link rel="stylesheet" href="css/viewer.min.css">
<style>
* { margin: 0; padding: 0;}
#dowebok { width: 700px; margin: 0 auto; font-size: 0;}
#dowebok li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
#dowebok li img { width: 100%;}
</style>
</head>

<body>
<h1>jQuery版本</h1>

<ul id="dowebok">
	<li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1"></li>
	<li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="图片2"></li>
	<li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="图片3"></li>
</ul>

<script src="js/jquery.min.js"></script>
<script src="js/viewer-jquery.min.js"></script>
<script>
$(function() {
	$('#dowebok').viewer({
		url: 'data-original',
	});
});
</script>

2. 使用vue动态加载数据之后：

2.1 viewer插件对动态加载的图片就无法操作了，即使重新初始化viewer也无效，

2.2 <ul id ="dowebok">里面动态加载的图片是正常显示的，只是无法使用viewer操作图片

2.3 vue中动态加载的图片路径必须是双斜杆，单斜杆会被自动去掉

2.4 vue中动态加载的数组数据不能使用 this.fileList = 动态加载值或 vm1.fileList赋值，值能接收到，但是页面不会刷新，需要使用循环遍历的方法一个一个值push到数组中，push之前先把初始化的值清空再使用 vm1.fileList.push(result[i]) 进行赋值即可，//数组的数据变更需要调用可以实时刷新数据的方法，例如push，sort，pop,splice，否则页面不会刷新

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="/lunbo/css/viewer.min.css">
<script src="/admin/js/jquery.min.js"></script>
<script src="/admin/js/viewer-jquery.min.js"></script>
<script src="/admin/js/vue.js"></script>
<script src="/admin/js/axios.js"></script>
<style>
	* { margin: 0; padding: 0;}
	#dowebok { width: 700px; margin: 0 auto; font-size: 0;}
	#dowebok li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
	#dowebok li img { width: 100%;}
</style>
</head>

<body >
    <div id="app">
       <ul id ="dowebok">
       		<li v-for="str in fileList">
                <img :src="str" :bing-data-original="str" alt="">
                <!-- <img :data-original='`${str}`' :src="str"> 跟上条效果一样-->
            </li>
       </ul>
    </div>
    <script>
	   /*  $(function() { //页面加载时初始化viewer插件，如果给fileList初始化一个图片，那么这么初始化viewer是有效的
	    	$('#dowebok').viewer({
	    		url: 'data-original',
	    	});
	    }); */
        var vm1 = new Vue({
            el: '#app',   // 选择器
            data: {
            	fileList :['\\lunbo\\img\\tibet-1.jpg']   //如果初始化时这么写viewer插件是能使用的，但动态变更的值viewer无法进行更新，如果初始化值为空数组[]，那么之后viewer直接无效
            },
            mounted:function () {//页面加载就调用
            	this.getSrc();
            },
            methods:{
           	  	getSrc:function () { //方法定义，需要调用时在调用地方写上 getSrc() 
            	   let url = '/getFileList';
            	   axios.get(url).then(function (res) {
	           		   // this.fileList = res.data;  //这么写页面不会实时刷新数据
	           		    var result = res.data;
	           		    for (var i=0;i<result.length;i++){
	           		   	    vm1.fileList.push(result[i]); //数组的数据变更需要调用可以实时刷新数据的方法，例如push，sort，pop,splice
	           		    } 
            	   })
           	  	}
           	}
        })
    </script>
</body>

</html>