[Vue.js]学习笔记-Vue.js计算属性-computed setter

范范 · 发表于 2018-12-12 15:16:48

导读部分

讨论区：http://www.sufeinet.com/forum-58-1.html

教程目录：http://www.sufeinet.com/thread-24026-1-1.html

教程部分

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

另： Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

Vue.js 计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用，主要使模板变的简单易懂，计算方法均在js中处理。

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

看内容的直观意思就是， getter是获取值的，而setter是修改值内容的

下面我们通过实例来进行computed的getter与setter的使用方法：

实例：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ site }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
	name: 'Google',
	url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '苏飞论坛 [url]http://www.sufeinet.com[/url]';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
</script>
</body>
</html>

运行结果如下：

通过上例可以看到， setter会修改原有的内容，并将修改后的内容输出

范范 · 发表于 2018-12-12 15:17:00

在运行 vm.site = '苏飞论坛 http://www.sufeinet.com'; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新

范范 · 发表于 2018-12-12 15:20:03

[HTML] 纯文本查看 复制代码

vm.site = '苏飞论坛 [url]http://www.sufeinet.com[/url]';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

主要是上面的内容， vm.site 时处理将内容给修改了，如果去掉这部分内容，显示的结果如下：

可以看到，内容并没有修改，还是原有的赋值内容运行

以上运行结果的html代码如下：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ site }}</p>
</div>

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

</script>
</body>
</html>

站长苏飞 · 发表于 2018-12-12 15:26:09

我只是路过打酱油的。

竹林风 · 发表于 2018-12-12 16:42:03

感恩无私的分享与奉献

liu · 发表于 2018-12-12 16:49:31

感恩无私的分享与奉献

惜 · 发表于 2018-12-13 17:13:33

看到这帖子真是高兴！

Amy · 发表于 2018-12-15 14:03:51

楼主加油，我们都看好你哦。

		自动登录	找回密码
密码			马上注册

[vue.js学习笔记] [Vue.js]学习笔记-Vue.js计算属性-computed setter

相关帖子