Question

这是我的代码：

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

像这样的更广泛的输出：

<div class="itemImg x50">

class =＆＃34; itemImg {{data.useClass}} == class =＆＃34; itemImg x50＆＃34; ，这是我的期望。

为什么v-link =＆＃34;＆＃39; / work /＆＃39; + {{data.useClass}}＆＃34; ！== v-link =＆＃34;＆＃39; / work /＆＃39; + x50＆＃34;

我想要更好的位置是：http://localhost:8000/#!/work/x50

注意：v-link用于v-for vue.js和vue-router，

非常感谢！

Answer 1

你应该：

从v-link
使用锚标记代替div

<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代码

＆＃13;

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')

＆＃13;

<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>

＆＃13;

感谢Pantelis Peslis帮助我！

vue.js v-link到classname不起作用

3 个答案: