浅析Vue中的计算属性和数据属性。

最新推荐文章于 2023-09-08 16:54:32 发布

玄熙

最新推荐文章于 2023-09-08 16:54:32 发布

阅读量423

点赞数 1

文章标签：前端 vue html

本文链接：https://blog.csdn.net/weixin_45878279/article/details/130185699

版权

该代码示例展示了一个简单的Vue.js应用，用于切换天气显示。数据属性`isHot`保存天气状态，计算属性`info`根据`isHot`动态计算显示炎热或凉爽。点击按钮时，`changeWeather`方法改变`isHot`的值，触发计算属性的更新，实现视图与数据同步。

摘要由CSDN通过智能技术生成

场景和定义：

结合代码片段简单对Vue实例new Vue({})的内容进行分析。

数据属性是Vue实例中用来存储数据的属性。它们通常用来存储应用程序的状态信息，例如用户输入的文本、选中的选项等。在Vue实例中，可以使用data选项来定义数据属性。

计算属性是Vue实例中用来定义基于其他数据动态计算出来的属性的属性。它们通常用来处理复杂的逻辑，例如根据多个数据属性计算出一个新的值。计算属性的值是动态计算出来的，当它所依赖的数据发生变化时，它的值也会相应地更新。在Vue实例中，可以使用computed选项来定义计算属性。

问题描述：

这段代码是一个简单的Vue.js应用程序，它显示了一个标题和一个按钮。标题显示当前天气状态（炎热或凉爽），而按钮则允许用户切换天气状态。当用户点击按钮时，changeWeather方法会被调用，它会改变isHot的值，从而改变计算属性info的值，最终改变页面上显示的天气状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气案例</title>
    <script type="text/javascript" src="./vue.js"></script>
</head> 
<body>
    <!-- 准备好一个容器 -->
     <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
     </div>
</body>

    <script type="text/javascript">
        new Vue({
            el:'#root',
            data:{
                isHot:true
            },
            computed:{
                info(){
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot
                }
            }
        })
    </script>
</html>

代码分析：

首先，我们来看一下HTML部分。在`<head>`标签中，我们引入了`vue.js`文件，这是Vue.js框架的核心文件，它包含了Vue.js的所有功能。接下来，在`<body>`标签中，我们定义了一个`<div>`容器，并给它设置了一个`id`属性，值为`root`。这个容器将用来承载我们的Vue应用程序。

在这个容器中，我们定义了一个`<h2>`标题和一个`<button>`按钮。在标题中，我们使用了双大括号语法（`{{info}}`）来绑定一个名为`info`的计算属性。这意味着，当计算属性`info`的值发生变化时，标题中的内容也会相应地更新。

接下来，在按钮上，我们使用了Vue.js的事件绑定语法（`@click="changeWeather"`）来绑定一个名为`changeWeather`的方法。这意味着，当用户点击按钮时，`changeWeather`方法将会被调用。

接下来，我们来看一下JavaScript部分。在这里，我们使用了`new Vue({})`语法来创建一个新的Vue实例。Vue实例是Vue.js应用程序的核心，它负责管理数据、模板和组件等。

在创建Vue实例时，我们传入了一个包含选项对象的参数。选项对象包含了多个选项，用来配置Vue实例的行为。其中，`el:'#root'`选项指定了Vue实例要挂载到哪个DOM元素上。在这个例子中，我们指定了挂载到id为`root`的元素上。

接下来，我们定义了一个名为`data`的选项。这个选项是一个对象，它包含了所有要在模板中使用的数据。在这个例子中，我们定义了一个名为`isHot`的数据属性，并将其初始值设为true。这意味着，默认情况下天气是炎热的。

接下来，我们定义了一个名为`computed`的选项。这个选项是一个对象，它包含了所有要在模板中使用的计算属性。计算属性是基于其他数据动态计算出来的属性。在这个例子中，我们定义了一个名为`info`的计算属性，并使用函数语法来定义它的计算方法。

在计算方法中，我们使用三元运算符（`this.isHot ? '炎热' : '凉爽'`）来根据数据属性`isHot`的值动态返回“炎热”或“凉爽”。由于计算属性是基于其他数据动态计算出来的属性，因此当数据属性发生变化时，计算属性也会相应地更新。

接下来，我们定义了一个名为`methods`的选项。这个选项是一个对象，它包含了所有要在模板中调用的方法。方法是可以在模板中调用的函数。在这个例子中，我们定义了一个名为`changeWeather`的方法，并使用函数语法来定义它的执行逻辑。

在执行逻辑中，我们使用赋值运算符（`= !this.isHot`) 来改变数据属性 `isHot ` 的值. 这意味着, 当用户点击按钮时, `isHot ` 的值将会从 true 变为 false, 或者从 false 变为 true. 由于计算属性 `info ` 是基于数据属性 `isHot ` 动态计算出来的,因此，当isHot的值发生变化时，计算属性info的值也会相应地更新。

在computed选项中，我们定义了info计算属性，在模板中，我们使用了双大括号语法（{{info}}）来绑定这个计算属性。这意味着，当计算属性info的值发生变化时，标题中的内容也会相应地更新

这就是为什么当用户点击按钮时，页面上显示的天气状态会发生变化的原因。

在这段代码中，所有出现的isHot都指的是同一个数据属性

在这段代码中，所有出现的info都指的是同一个计算属性

总之，这段代码使用了Vue.js框架来实现一个简单的天气切换功能。它定义了一个Vue实例，并在其中配置了数据、计算属性和方法等选项。通过使用Vue.js的双向数据绑定和事件绑定等特性，我们可以轻松地实现数据与视图之间的同步更新。