<template> <div class="hello"> <ul> <li v-for="item in datas"> <div :style="{fontSize:changsize()}">{{item}}</div> </li> </ul> <input type="text" v-model="tests"> {{tests}} </div> </template> <script> export default { name: 'HelloWorld', data () { return { datas:['one','two','three','one','two','three','one','two','three'], fz:'', tests:'', } }, methods:{ changsize(){ return (parseInt(Math.random()*15)+10)+'px'; } } } </script>
代码如上,我希望在网页开始的时候对每个v-for出来item都必须要赋值一个font-size的值,这样写目的是达到了。但是有一个很大的问题,我在其他地方使用了v-model,一旦我在input的内部进行输入,方法changsize又开始调用了??我测试了一下,是其中的v-for又重新渲染了一下?这到底是什么鬼?我找了半天的源码。也没有找到问题在哪。求问啊!
初步猜测是每次发生改变的时候是对data内部所有的数据都重新渲染了吗???
..自问自答吧。刚刚写完解释,
http://www.cnblogs.com/acefeng/p/8988356.html