VUE:computed、filter过滤器等配置对象介绍——学习笔记

最新推荐文章于 2023-09-15 14:05:34 发布

JieFighting

最新推荐文章于 2023-09-15 14:05:34 发布

阅读量275

点赞数

文章标签： vue vue.js

本文链接：https://blog.csdn.net/fuzhijieabc/article/details/110451337

版权

Vue配置对象：

data	Vue实例数据对象
methods	定义Vue实例中的方法
components	定义子组件
computed	计算属性
filters	过滤器

el：唯一根元素，通过class，id将网页结构与Vue实例绑定

经典案例：

在这里插入图片描述

关键代码：

<div id="app">{{name}}</div>
<script>
var vm = new Vue({
  el: '#app', // 通过el与div元素绑定
  data: {name: 'Vue实例创建成功！'}
})	
<script>

小知识点：如果想在控制台拿到Vue实例中的data数据，可以通过

console.log(vm.$data.name)

在这里插入图片描述

methods与data

这两个配置对象属性较为简单可用一个案例展示：

案例展示：

单击按钮，在按钮下方显示

代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 为button按钮绑定click事件 -->
    <button @click="showInfo">请单击</button>
    <p>{{msg}}</p>
  </div>
<script> 
  var vm = new Vue({
    el: '#app',
    data: {
      msg: ''
    },
    methods: {
       // 定义事件处理方法showInfo
      showInfo () {
        this.msg = '触发单击事件'
      }
   }
  
  })
        
</script>     
</body>
</html>

代码解析

配置对象data——msg代表的Vue实例中的数据对象
配置对象methods中定义了Vue实例中的方法

conputed属性：对于需要计算后才能得到的属性需要用该配置对象

小案例对应的关键代码：

<div id="app">
        <p>总价格：{{totalPrice}}</p><p>单价：{{price}}</p>
        <p>数量：{{num}}</p>
        <div>
          <button @click="num == 1 ? 0 : num--">减少数量</button>
          <button @click="num++">增加数量</button>
        </div>
      </div>
         var vm = new Vue({
  el: '#app',
  data: {price: 20, num: 0},
  computed: {
    // 总价格totalPrice
    totalPrice () {return this.price * this.num}
  }
})

代码分析：

对于其中的totalPrace就表示需要计算才能得到的属性，，所以其具体计算过程需要在内置对象computed中定义说明

filter——过滤器：在页面中直接对数据进行操作（格式化等）

filter经典案例——小写字母转为大写字母

关键代码：

<div id="app">
            <div>{{message | toUpcase}}</div>
 </div>
    <script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'helloworld'
  },
  filters: {
    // 将 helloworld 转换为 HELLOWORLD
    toUpcase (value) {
      return value ? value.toUpperCase() : ''
    }
  }
})