化石原创文章,转载请注明来源并保留原文链接


在mouted方法中,如果用了DOM的回调方法,而这个方法需要用到methods里定义的方法,那么this不能直接被使用。我们需要在mouted中,先把this赋值给一个变量,而后在这个回调中就能使用到方法。

比如下面的例子:

  methods : {
    
    changeFontSize () {
        var initBannerTitleFontSize = 80, initBannerTitleMarginTop = 70, initBannerTitleMarginBottom = 20;
        var initBannerDescFontSize = 30, initBannerDescLineHeight = 45;

        var height = document.getElementById('bannerbg').clientHeight;
        var percent = height / 300;

        var bannerTitle = document.getElementById('bannertitle');
        var bannerDesc = document.getElementById('bannerdesc');

        bannerTitle.style.fontSize = percent * initBannerTitleFontSize + "px";
        bannerTitle.style.marginTop = percent * initBannerTitleMarginTop + "px";
        bannerTitle.style.marginBottom = percent * initBannerTitleMarginBottom + "px";
        
        bannerDesc.style.fontSize = percent * initBannerDescFontSize + "px";
        bannerDesc.style.lineHeight  = percent * initBannerDescLineHeight + "px";
    },
  },
  mounted() {
    var that = this;
    
    if(document.body.clientWidth<800){
      this.isPC = false;
    }

    document.getElementById('bannerbg').addEventListener('load', function() {
      that.changeFontSize();
    });

    window.onresize = () => {
        return (() => {
          this.changeFontSize();
        })();
    };
  }

这里的that本地变量,就执行this对象,在回调中使用完全没有问题。在javascript中,这个是很常见的手法。


化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


使用Vue.js,做列表的时候非常方便,一般只要一个v-for加上相应的模板,就可以为开发者省下巨量的代码时间,比如:

<ul id="newVehicleList" style="background-color: grey; list-style-type: none; padding-left: 0;">
	<template v-for="item in items">
		<li style="width:25%; float:left;">
			<img v-bind:src="item.picture" style="display: block;">
			<button>配置</button>
			<button>详细信息</button>
		</li>
	</template>
</ul>

上面的代码,只要写一个<li>的模版,我们就可以通过代码加入数据,就能控制列表的增加或者减少。

例子中,列表的每个项都是一张图加上两个按钮。这个图的src值需要在数据中得到,因此我们使用了v-bind。然后每个image的真正路径,是数据中的picture数据指定。所有的数据通过Vue的items得到,每个item中必须含有picture字段。对应的Vue代码如下:

$('#newVehicleLayout').load('./view/mainPage/vehicleNew.html', function () {
	var vehicleList = new Vue({
		el: '#newVehicleList',
		data: {
			items: [
				{ message: 'Foo', picture: 'image/baojun.jpg' },
				{ message: 'Foo', picture: 'image/kylin.jpg' },
				{ message: 'Foo', picture: 'image/zhijun.jpg' },
				{ message: 'Foo', picture: 'image/hydai.jpg' },
				{ message: 'Foo', picture: 'image/alpha.jpg' },
				{ message: 'Foo', picture: 'image/geruisi.jpg' },
				{ message: 'Foo', picture: 'image/ix25.jpg' },
				{ message: 'Foo', picture: 'image/baojun.jpg' },
			],
		}
	});
});

化石原创文章,转载请注明来源并保留原文链接