使用Vue框架数据无法渲染到页面解决方法

使用Vue框架数据无法渲染到页面解决方法

  • 页面无法渲染的原因
  • 解决方式

页面无法渲染的原因

Vue绑定事件的区域与渲染数据的区域不在同一个大的区域

html页面:

<html>
	<div id="max">
		
		<div id="top">
			<div id="top_top">
				<input type="text" placeholder="  搜索课程" id="search" />
				<span id="selectvideo" v-on:click="aaa">span>
			div>
		div>
		
		<div id="bottom">
			
			<div class="video_video2" v-for="value in course1">
				<dl style="position: relative;">
					<img :src="value.courseCover" height="120px;" width="203px;"
						class="mapVideoCover" />
					<button class="topcourse">置顶课程button>
					<dd style="font-size: 12px; color: gray; margin-left: 0px;">
						课程发布日期:<span>{
    {value.courseUptime}}span>
					dd>
					<dd style="font-size: 12px; color: gray; margin-left: 0px;">
						课程名称:<span>{
    {value.courseName}}span>
					dd>
					<dd style="font-size: 12px; color: gray; margin-left: 0px;">
						收藏数:<span>{
    {value.courseCollect}}span>
					dd>
					<dd style="font-size: 12px; color: gray; margin-left: 0px;">
						课程描述:<span>{
    {value.courseIntroduce}}span>
					dd>
					<dd style="font-size: 12px; color: gray; margin-left: 0px;">
						课程类型:<span>{
    {value.courseType}}span>
					dd>
					<dd style="font-size: 12px; color: gray; margin-left: 0px;">
						课程价格:<span>{
    {value.coursePrice}}span>
					dd>
				dl>
			div>
		div>
	div>
html>

我写到这部分的时候发现需要用到Vue,但是发现绑定事件的区域和渲染的区域不在同一个

里,后来就用了最大的那个
,但是最大的
中还有其他的很多代码,所以写的时候会影响到其他地方的显示效果。

解决方式

js:

var course1 = "";
var vm = new Vue({
     
	el : "#max",
	data : {
     
		course1 : []
	},
	methods : {
     
		// 搜索框
		aaa : function(event) {
     
			console.log("搜索框的监听方法")
			var userId = $("#userId").text();
			var searchMessage = $("#search").val();
			course = ajax1(userId, searchMessage)
			this.course1 = course
			console.log(this.course1)
		}
	}
})
function ajax1(userId, searchMessage) {
     
	var a = $.ajax({
     
		url : "../courseController/selectLikeCourseByName",
		type : "post",
		async : false,
		data : {
     
			userId : userId,
			courseName : searchMessage
		}
	})
	//这里本来可以直接是:a.responseText,但是不知道为什么我用不了,就改了一下。
	console.log($.parseJSON(a.responseText)[0]);
	return $.parseJSON(a.responseText)[0];
}

你可能感兴趣的:(vue,jquery)