查看一下效果,应该很容易得到结果
有时我们可能需要重复一个包含多个节点的块,这时可以用 <template>标签包裹这个块。这里的 <template>标签只起到语义上的包裹作用,其本身不会被渲染出来。例如:
简单值 (primitive value) 即字符串、数字、boolean 等并非对象的值。对于包含简单值的数组,你可用 $value 直接访问值:
有时我们可能想要更明确地访问当前作用域的变量而不是隐式地回退到父作用域。你可以通过提供一个参数给 v-repeat 指令并用它作为将被迭代项的别名:
Vue.js 内部对被观察数组的变异方法 (mutating methods,包括 push(), pop(), shift(), unshift(), splice(), sort() 和 reverse()) 进行了拦截,因此调用这些方法也将自动触发视图更新。
下面是一个演示的例子,点击按钮的时候数据项会被移除
Vue.js 给被观察数组添加了两个便捷方法:$set() 和 $remove() 。
你应该避免直接通过索引来设置数据绑定数组中的元素,比如 demo.items[0] = {},因为这些改动是无法被 Vue.js 侦测到的。你应该使用扩展的 $set() 方法:
$remove() 只是 splice()方法的语法糖。它将移除给定索引处的元素。当参数不是数值时,$remove() 将在数组中搜索该值并删除第一个发现的对应元素。
当你使用非变异方法,比如filter(), concat() 或 slice(),返回的数组将是一个不同的实例。在此情况下,你可以用新数组替换旧的数组:
你可能会认为这将导致整个列表的 DOM 被销毁并重新渲染。但别担心,Vue.js 能够识别一个数组元素是否已有关联的 Vue 实例, 并尽可能地进行有效复用。
在某些情况下,你可能需要以全新的对象(比如 API 调用所返回的对象)去替换数组。如果你的每一个数据对象都有一个唯一的 id 属性,那么你可以使用 track-by 特性参数给 Vue.js 一个提示,这样它就可以复用已有的具有相同 id 的 Vue 实例和 DOM 节点。
例如:你的数据是这个样子的
那么你可以像这样给出提示:
在替换 items 数组时,Vue.js 如果碰到一个有 _uid: '88f869d' 的新对象,它就会知道可以直接复用有同样 _uid 的已有实例。 在使用全新数据重新渲染大型 v-repeat 列表时,合理使用 track-by 能极大地提升性能。
你也可以使用 v-repeat 遍历一个对象的所有属性。每个重复的实例会有一个特殊的属性 $key。对于简单值,你也可以象访问数组中的简单值那样使用 $value 属性。
在 ECMAScript 5 中,对于给对象添加一个新属性,或是从对象中删除一个属性时,没有机制可以检测到这两种情况。针对这个问题,Vue.js 中的被观察对象会被添加三个扩展方法: $add(key, value), $set(key, value) 和 $delete(key)。这些方法可以被用于在添加 / 删除观察对象的属性时触发对应的视图更新。方法 $add 和 $set 的不同之处在于当指定的键已经在对象中存在时 $add 将提前返回,所以调用 obj.$add(key) 并不会以 undefined 覆盖已有的值。
v-repeat 也可以接受一个整数。在这种情况下,它将重复显示一个模板多次。 下面的例子将迭代3次。
有时候我们只需要显示一个数组的过滤或排序过的版本,而不需要实际改变或重置原始数据。Vue 提供了两个内置的过滤器来简化此类需求: filterBy 和 orderBy。
需要准备的材料分别有:电脑、html编辑器、浏览器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<script>标签,输入js代码:var a = '<input type="text" value="test" />'document.body.innerText = a。
3、浏览器运行index.html页面,此时html代码被当成字符串渲染到了页面上。
ImageUtils.loadTexture:从指定位置加载图片文件,文件格式可以是PNG,GIF或JPEG文件。ImageUtils.loadTexture
2个很关键的值得注意的点:
这个方法是异步调用的,所幸的是使用了render循环,这样每秒能被渲染几十次,并不会影响渲染的效果
图片的长宽大小最好是2的次方256*256 512*512等。我曾看到如果使用不是类似这样的长宽,Three..js会将其压缩。
加载纹理的方法
通常,加载纹理可理解为加载图片,然后贴在材质上,一个常用的套路就是写一个函数,用来加载图片,然后返回网格,实例代码如下
function createMesh(geom, imageFile) {
var texture = THREE.ImageUtils.loadTexture(imageFile)
var mat = new THREE.MeshPhongMaterial()
mat.map = texture//材质的Map属性用于添加纹理
var mesh = new THREE.Mesh(geom, mat)
return mesh
}12345671234567
所以,如果给球体添加一个木质纹理属性,就会看起来像这个样子