当前位置: 首页>后端>正文

vue element 循环Rate评分使用绑定指定 vue中循环

1、vue.js中的循环结构(列表渲染:for)如何使用?
v-for
用于循环的数组里面的值可以是对象,也可以是普通元素

v-for

可以使用 v-for 指令基于一个数组渲染一个列表。这个指令使用特殊的语法,形式为 item in items,items 是数据数组,item 是当前数组元素的别名:

示例:

    •  {{ item.message }} 
     var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) 结果: 
    {% raw %}
    {{item.message}}
     {% endraw %}

    2、vue.js中的循环结构(列表渲染:for)对普通的for循环的增强有哪些?
    $index
    在 v-for 块内我们能完全访问父组件作用域内的属性,另有一个特殊变量 $index,正如你猜到的,它是当前数组元素的索引:

      •  {{ parentMessage }} - {{ $index }} - {{ item.message }} 
       var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) 结果: 
      {% raw%}
      {{ parentMessage }} - {{ $index }} - {{ item.message }}
       {% endraw %}

      另外,你可以为索引指定一个别名(如果 v-for 用于一个对象,则可以为对象的键指定一个别名):


      {{ index }} {{ item.message }}


      3、vue.js中想用循环结构,但是不想给循环出来的东西添加标签,如何操作?
      template v-for
      类似于 template v-if,也可以将 v-for 用在 标签上,以渲染一个包含多个元素的块。例如:

      • {{ item.msg }}

      4、vue.js的循环中,如何动态改变数据源数组里面的内容?
      数组变动检测 变异方法
      Vue.js 包装了被观察数组的变异方法,故它们能触发视图更新。被包装的方法有:

      push()
       pop()
       shift()
       unshift()
       splice()
       sort()
       reverse()


      你可以打开浏览器的控制台,用这些方法修改上例的 items 数组。例如:example1.items.push({ message: ‘Baz’ })。

      5、vue.js的列表渲染中,修改数据源数组的方法和不修改数据源数组的方法分别有哪些?
      变异方法 替换数组
      变异方法
      Vue.js 包装了被观察数组的变异方法,故它们能触发视图更新。被包装的方法有:

      push()
       pop()
       shift()
       unshift()
       splice()
       sort()
       reverse()


      你可以打开浏览器的控制台,用这些方法修改上例的 items 数组。例如:example1.items.push({ message: ‘Baz’ })。

      替换数组
      变异方法,如名字所示,修改了原始数组。相比之下,也有非变异方法,如 filter(), concat() 和 slice(),不会修改原始数组而是返回一个新数组。在使用非变异方法时,可以直接用新数组替换旧数组:

      example1.items = example1.items.filter(function (item) {
       return item.message.match(/Foo/)
       })


      可能你觉得这将导致 Vue.js 弃用已有 DOM 并重新渲染整个列表——幸运的是并非如此。 Vue.js 实现了一些启发算法,以最大化复用 DOM 元素,因而用另一个数组替换数组是一个非常高效的操作。

      6、vue.js的列表渲染中,遍历对象和遍历数组有什么区别?
      $key
      也可以使用 v-for 遍历对象。除了 $index 之外,作用域内还可以访问另外一个特殊变量 $key。

        •  {{ $key }} : {{ value }} 
         new Vue({ el: '#repeat-object', data: { object: { FirstName: 'John', LastName: 'Doe', Age: 30 } } }) 结果: 
        {% raw %}
        {{ $key }} : {{ value }}
         {% endraw %}

        也可以给对象的键提供一个别名:


        {{ key }} {{ val }}

        在遍历对象时,是按 `Object.keys()` 的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

        7、vue.js的列表循环中如何循环打印整数(比如1-100)(比如将某内容重复多少遍)?
        值域 v-for
        v-for 也可以接收一个整数,此时它将重复模板数次。


        {{ n }}

        结果:

        {% raw %}
        {{ n }}
         {% endraw %}



        https://www.xamrdz.com/backend/3t21962011.html

        相关文章: