Vue js 循环与计算属性深入解析（二）

admin
Vue.js
9小时前
3热度
0评论

Vue.js 是一款流行的前端框架，以其简洁的语法和高效的性能受到开发者的喜爱。本文将详细介绍 Vue.js 中的循环语句和计算属性，并通过实例帮助你更好地理解和应用这些功能。

循环语句 v-for

基本用法

在 Vue.js 中，v-for 指令用于循环渲染列表。其基本语法为 item in items，其中 items 是数据源数组，item 是当前迭代项的别名。

<div id="app">

<ol>
    <li v-for="site in sites">{{ site.name }}</li>
  </ol>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

模板中的 v-for

v-for 也可以用于模板中的多个元素。例如：


<ul>
  <template v-for="site in sites">

<li>{{ site.name }}</li>

<li>{{ site.url }}</li>
  </template>
</ul>

迭代对象

v-for 不仅可以用于数组，还可以用于对象。通过 (value, key) in object 语法，可以同时获取对象的键和值。

<div id="app">

<ul>
    <li v-for="(value, key) in object">{{ key }} : {{ value }}</li>
  </ul>
</div>

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

迭代整数

v-for 还可以用于循环整数，生成指定数量的元素。

<div id="app">

<ul>
    <li v-for="n in 10">{{ n }}</li>
  </ul>
</div>

索引和键名

在迭代数组或对象时，可以使用第三个参数 index 来获取当前项的索引或键名。

<div id="app">

<ul>
    <li v-for="(value, key, index) in object">{{ index }}. {{ key }} : {{ value }}</li>
  </ul>
</div>

计算属性 computed

基本用法

计算属性（computed properties）在处理复杂逻辑时非常有用。它们会根据依赖的数据自动更新，无需手动调用。

<div id="app">

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

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

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

computed vs methods

虽然 methods 也可以实现类似的功能，但 computed 更高效。因为 computed 会缓存结果，只有当依赖的数据发生变化时才会重新计算。

<div id="app">

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

<p>计算后反转字符串: {{ reversedMessage2() }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reversedMessage2: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

computed setter

计算属性默认只有 getter，但也可以提供 setter。

<div id="app">

<p>网站: {{ site }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      get: function () {
        return this.name + ' ' + this.url
      },
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})

// 调用 setter
vm.site = '菜鸟教程 http://www.runoob.com'
console.log(vm.name) // 输出: 菜鸟教程
console.log(vm.url)  // 输出: http://www.runoob.com
</script>

监听属性 watch

基本用法

watch 用于监听数据的变化，并在数据变化时执行特定的操作。

<div id="app">
  <p style="font-size:25px;">计数器: {{ counter }}</p>
  <button @click="counter++" style="font-size:25px;">点我</button>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    counter: 1
  }
})

vm.$watch('counter', function (nval, oval) {
  alert('计数器值的变化: ' + oval + ' 变为 ' + nval + '!')
})
</script>

实际应用

watch 可以用于复杂的表单验证或数据同步。例如，实现千米与米之间的换算：

<div id="computed_props">
  千米: <input type="text" v-model="kilometers">
  米: <input type="text" v-model="meters">
</div>
<p id="info"></p>

<script>
var vm = new Vue({
  el: '#computed_props',
  data: {
    kilometers: 0,
    meters: 0
  },
  watch: {
    kilometers: function (val) {
      this.meters = this.kilometers * 1000
    },
    meters: function (val) {
      this.kilometers = this.meters / 1000
    }
  }
})

// $watch 是一个实例方法
vm.$watch('kilometers', function (newValue, oldValue) {
  document.getElementById("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue
})
</script>

动态绑定 class 和 style

class 属性绑定

Vue.js 提供了多种方式来动态绑定 class 属性。

对象语法

<div v-bind:class="{ 'active': isActive }"></div>

多个 class

<div class="static" v-bind:class="{ 'active': isActive, 'text-danger': hasError }"></div>

计算属性

<div v-bind:class="classObject"></div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    error: { value: true, type: 'fatal' }
  },
  computed: {
    classObject: function () {
      return {
        base: true,
        active: this.isActive && !this.error.value,
        'text-danger': this.error.value && this.error.type === 'fatal'
      }
    }
  }
})
</script>

数组语法

<div v-bind:class="[activeClass, errorClass]"></div>

三元表达式

<div v-bind:class="[errorClass, isActive ? activeClass : '']"></div>

style 属性绑定

对象语法

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>

数组语法

<div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>

事件监听 v-on

基本用法

v-on 指令用于监听 DOM 事件，并在触发时执行特定的方法。

<div id="app">
  <button v-on:click="counter += 1">增加 1</button>

<p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})
</script>

调用方法

通常情况下，我们会使用 v-on 调用一个定义的方法。

<div id="app">
  <button v-on:click="greet">Greet</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  methods: {
    greet: function (event) {
      alert('Hello ' + this.name + '!')
    }
  }
})
</script>

总结

本文详细介绍了 Vue.js 中的循环语句 v-for、计算属性 computed、监听属性 watch 以及动态绑定 class 和 style 的方法。通过这些功能，你可以更高效地管理和渲染数据，提升用户体验。希望本文对你有所帮助，祝你在 Vue.js 开发中取得更大的进步！