vue.js v-link to className不起作用

Question

这是我的代码：

<div v-link="'/work/' + {{data.useClass}}" class="itemImg {{data.useClass}}">

这样的吹牛输出：

<div class="itemImg x50">

class =" itemimg {{data.useclass}}} == class =" itemimg x50"，这是我的期望。

为什么v-link ="'/work/' {{data.useclass}}}}！== v-link ="'/work/work/' x50"

我想要眉毛位置是：http：//localhost：8000/＃！/work/x50

注意：v-link in V-for使用vue.js和vue-router，

非常感谢！

Answer 1

您应该：

• 从 v-link
中卸下卷曲括号
• 使用锚定标签代替div

＆nbsp;

<a v-link="'/work/' + data.useClass" class="itemImg {{data.useClass}}">

Answer 2

类以略有不同的方式字子：

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
data: {
  isA: true,
  isB: false
}

https://vuejs.org/guide/class-and-style.html

Answer 3

html和JS代码

var png = ".png"
var jpg = ".jpg"
var HtmlFormat = ".html"

//  WORK
var db = new loki('workDB.json');
var workCol = db.addCollection('workCol');
var workNames = ["x50", "glmg", "ring", "iwatch", "moto", "edge", "shave", "house"];
var workWebglFolder = "public/webgl/case/";
var workHtmlFolder = "public/pages/work/";
var workImgFolder = "public/assets/img/workImg/";
var workImgkUrls = [];
var workHtmlUrls = [];
var workTitles = [];
var workSummary = [];
$.each(workNames, function(index, title) {
    var workWebglUrl = workWebglFolder + title;
    var workHtmlUrl = workHtmlFolder + title + HtmlFormat;
    var workimgkUrl = workImgFolder + title + png;
    var workOBJ = {};
    workOBJ.id = index;
    workOBJ.useClass = title;
    workOBJ.title = title;
    workOBJ.link3d = workWebglUrl;
    workOBJ.link = workHtmlUrl;
    workOBJ.image = workimgkUrl;
    workCol.insert(workOBJ);
    var useClass = "." + title;
    workHtmlUrls.push(workHtmlUrl);
    workImgkUrls.push(workimgkUrl);
    $.ajax({
        url: workHtmlUrl,
        async: false,
        success: function(data) {
            title = $(data).filter('title').text();
            summary = $(data).filter(useClass).text();
            workOBJ.title = title;
            workOBJ.summary = summary;
        }
    });
})
//  BLOG
var db = new loki('blogDB.json');
var blogCol = db.addCollection('blogCol');
var blogNames = ["waveLoader", "playcanvas-introduce", "modoSoft", "lokiJS", ];
var blogHtmlFolder = "public/pages/blog/";
var blogImgFolder = "public/assets/img/blogImg/";

$.each(blogNames, function(index, title) {
    var blogHtmlUrl = blogHtmlFolder + title + HtmlFormat;
    var blogimgkUrl = blogImgFolder + title + jpg;
    var blogOBJ = {};
    blogOBJ.id = index;
    blogOBJ.useClass = title;
    blogOBJ.link = blogHtmlUrl;
    blogOBJ.image = blogimgkUrl;
    $.ajax({
        url: blogHtmlUrl,
        async: false,
        success: function(data) {
            blogOBJ.title           = $(data).filter('title').text();
            blogOBJ.date            = $(data).find('.date').text();
            blogOBJ.author          = $(data).find('.author').text();
            blogOBJ.tags          = $(data).find('.tags').text();
            blogOBJ.category        = $(data).find('.category').text();
            blogOBJ.summary         = $(data).find('.summary').text().substring(0,200) + "...";
        }
    });
    blogCol.insert(blogOBJ);
})
// db.saveDatabase(function () {
//     console.log("save db")
// });
var workdv = workCol.addDynamicView('workCol_view');
workdv.applyWhere(function customFilter(obj){
    return obj.id  > -1;
});
workdv.applySimpleSort('id')
var blogdv = blogCol.addDynamicView('blogCol_view');
blogdv.applyWhere(function customFilter(obj){
    return obj.id  > -1;
});
blogdv.applySimpleSort('id')

var lookVue = new Vue({
    el: '.pages',
    data: {
        work: workdv.data(),
        blog: blogdv.data()
    },
});
console.log(lookVue.work[0].title)

var notFound = Vue.extend({
   template: '<h1>Not Found</h1>' +
   '<router-view></router-view>'
})
var workComponent = Vue.extend({
    template:
            '<h1>Work</h1>' +
            '<router-view></router-view>'
})
var blogComponent = Vue.extend({
   template:
            '<h1>Blog</h1>' +
            '<router-view></router-view>'
})
var aboutComponent = Vue.extend({
   template:
            '<h1> aboutComponent </h1>' +
            '<a v-link="{ path: '/subroute' }" class="btn btn-lg btn-primary" role="button">View SubRoute</a>' +
            '<router-view></router-view>'
})
var contactComponent = Vue.extend({
   template:
            '<h1> 联系 </h1>' +
            '<router-view></router-view>'
})
var detail = Vue.extend({
   template:
               '<h1>Navbar example</h1>' +
               '<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>' +
               '<p>To see the difference between static and fixed top navbars, just scroll.</p>'
})

Vue.config.debug = true;
Vue.use(VueRouter)
var router = new VueRouter({
   history: false,
   hashbang:true,
   // saveScrollPosition:true,
   root: '/'
})
Vue.component('newtemp', {
    template: '#workVUE',
     route: {
       data: function(transition) {
            transition.next({
                // saving the id which is passed in url to $data
                itemName: transition.to.params.itemName
            });
        }
     },
    data: function() {
        return {
            itemName:itemName,
          }
       },
})

router.map({
   // '*': {
   //    component: notFound
   // },
   '/': {
      component: workComponent,
      subRoutes: {
      '/detail': {
           component: detail
         }
      }
   },
   '/work': {
      component: workComponent,
      subRoutes: {
      '/detail': {
           component: detail
         }
      }
   },
   '/blog': {
      component: blogComponent,
      subRoutes: {
      '/detail': {
           component: detail
         }
      }
   },
   '/about': {
      component: aboutComponent,
      subRoutes: {
      '/detail': {
           component: detail
         }
      }
   },
   '/contact': {
      component: contactComponent
   },
  '/detail/:itemName': {
    name: 'detail', // 给这条路径加上一个名字
    component: Vue.component('newtemp')
  },
});
var App = Vue.extend()
router.start(App, 'body')

<div class="page work">
    <div class="barMes">
        <div class="mark"><h3>Mark</h3></div>
        <div class="go3d"><h3>GO3D</h3></div>
        <div class="mes"><h3>Message</h3></div>
    </div>
    <div class="gridItems w80">
        <template v-for="data in work" id="workVUE">
            <div class="item scrollItem">
                <!-- <a v-link="{ name: 'new', params: { name: user.name }}"> -->
                <a v-link="'/work/' + 'detail' " class="itemImg">
                    <div class="gridImg workImg">
                        <img v-bind:src="data.image" />
                    </div>
                </a>
                <div class="itemTitle">
                    <h3>{{data.title}}</h3>
                </div>
                <div class="itemTag">
                    <div class="tagTitle">
                        <ul class="tagName">
                            <li class="tagTip"><h3> 标签: </h3> </li>
                            <li><h3 class="pageName"> {{data.useClass}} </h3> </li>
                            <li><h3> {{data.tag}} </h3> </li>
                        </ul>
                        <div class="titlePos"> <h3>titlePos</h3> </div>
                    </div>
                </div>
                <ul class="info">
                    <li class="infoItem infoTitle">
                        <h3>{{data.title}}</h3>
                    </li>
                    <li class="infoItem infoCont">
                        <h3>{{data.date}}</h3>
                        <h3>作者：laishi</h3>
                    </li>
                </ul>
                <ul class="bar">
                    <li class="barItem barMark">
                        <div> <i class="fa fa-bookmark" aria-hidden="true"></i> </div>
                    </li>
                    <li class="barItem">
                        <dir> <a class="moreLink" v-bind:href="data.link3d"> <h3> 3D </h3> </a> </dir>
                    </li>
                    <li class="barItem barInfo">
                        <div>
                            <i class="fa fa-info"></i>
                        </div>
                    </li>
                </ul>
            </div>{{ }}
        </template>
        <div class="gap"></div>
        <div class="gap"></div>
        <div class="gap"></div>
    </div>
</div>

谢谢Pantelis Peslis帮助我！