vue.js计算机属性02

简介: vue.js计算机属性02
<!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>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>姓名:{{ fullname }}</p>
        <button @click="change()">修改姓名</button>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                surname:'韦',
                name:'小宝'
            },
            computed:{
                // 计算属性的简写形式~
                // fullname:function(){
                //     return this.surname+this.name
                // }
                //计算属性的完整写法~
                fullname:{
                    // 计算属性的gitter
                    get: function(){
                        return this.surname+this.name
                    },
                    // 计算属性的setter,用于设置计算属性的值~
                    set: function(value){
                        //value用来保存计算属性的新值,在这个程序value的值就是 张无忌~
                        this.surname = value[0] //取出张 这个字~
                        this.name = value.substr(1,2) //取出 无忌 这两个字~
                    }
                }
            },
            methods:{
                change:function(){
                    this.fullname = '张无忌'
                }
            }
        })
    </script>
</body>
</html>
相关文章
|
20天前
|
JavaScript 前端开发 CDN
前端 JS 经典:package.json 属性详解
前端 JS 经典:package.json 属性详解
15 1
|
23天前
|
XML JavaScript 前端开发
如何在JavaScript中设置多个样式属性?
【6月更文挑战第29天】如何在JavaScript中设置多个样式属性?
41 3
|
14天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的计算机知识竞赛网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的计算机知识竞赛网站附带文章源码部署视频讲解等
9 0
|
16天前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
14 0
|
17天前
|
JavaScript
vue 批量绑定属性(你可能没这样用过 v-bind)
vue 批量绑定属性(你可能没这样用过 v-bind)
17 0
|
18天前
|
JavaScript
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
15 0
|
19天前
|
缓存 JavaScript C++
|
20天前
|
JavaScript
js 排序—— sort() 对普通数组、对象数组(单属性/多属性)排序
js 排序—— sort() 对普通数组、对象数组(单属性/多属性)排序
9 0
|
20天前
|
JavaScript
Vue computed自动计算对象中的属性
Vue computed自动计算对象中的属性
15 0