高端！网站定制/设计/优化/二次开发/制作/搭建-玉树高端网站建设

发表日期： 2022-08-09 22:52:59 浏览次数：76

网站建设.png

v-for 还可以循环数组：

<div id="app">
  <ul>
    <li v-for="n in [1,3,5]">
      {{ n }}    </li>
  </ul></div>

尝试一下 »

wally5年前 (2017-10-19)

   锋
  cka***ng@qq.com
   参考地址
88
v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 key 的特殊属性：
```
<div v-for="item in items" :key="item.id">  {{ item.text }}</div>
```
锋
   锋
  cka***ng@qq.com
   参考地址
5年前 (2017-11-08)

不仅如此，在迭代属性输出的之前，v-for会对属性进行升序排序输出：

new Vue({
  el: '#app',
  data: {
    object: {
      2: '学的不仅是技术，更是梦想！',
      1: '菜鸟教程',
      0: 'http://www.runoob.com'
    }
  }})

尝试一下 »

输出：

http://www.runoob.com菜鸟教程学的不仅是技术，更是梦想！

boser5年前 (2017-11-29)

遍历对象的时候可以处理嵌套。

<div id="app">
  <ul>
    <li v-for="(value,key,index) in object">        <p v-if="typeof value !='object'">{{value}}....{{ index }}</p>        <p v-else>{{key}}....{{index}}</p>        <ul v-if="typeof value == 'object'">            <li v-for="(value, key, index) in value">                {{key}}:{{value}}....{{ index }}
            </li>        </ul>
    </li>
  </ul></div>

尝试一下 »

hunterfall4年前 (2018-07-12)

190

九九乘法是程序员的最爱:

<div id="app">
    <div v-for="n in 9">        <b v-for="m in n">            {{m}}*{{n}}={{m*n}}
        </b>
    </div></div>

尝试一下 »

算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

可以看下以下反转字符串的例子：

实例 1

</div>

尝试一下 »

实例 1 中模板变的很复杂起来，也不容易看懂理解。

接下来我们看看使用了计算属性的实例：

实例 2

<p>原始字符串: {{ message }}</p>

<p>计算后反转字符串: {{ reversedMessage }}</p>

</div>

var vm = new Vue({

el: '#app',

data: {

message: 'Runoob!'

computed: {

// 计算属性的 getter

reversedMessage: function () {

// `this` 指向 vm 实例

return this.message.split('').reverse().join('')

}

})

</script>

尝试一下 »

实例 2 中声明了一个计算属性 reversedMessage 。

提供的函数将用作属性 vm.reversedMessage 的 getter 。

vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

实例 3

methods: {

reversedMessage2: function () {

return this.message.split('').reverse().join('')

}

尝试一下 »

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

computed setter

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

实例 4

var vm = new Vue({

el: '#app',

data: {

name: 'Google',

url: 'http://www.google.com'

computed: {

site: {

// getter

get: function () {

return this.name + ' ' + this.url

高端！网站定制/设计/优化/二次开发/制作/搭建-玉树高端网站建设

上一页：专业网站建设-网站设计-网站制作与网站开发-高端品牌企业宣传策划-玉树上往建站

下一页：玉树网站建设_企业网站制作公司_高端网站设计开发-玉树上往