computed、watch以及字符串和数组

最新推荐文章于 2024-01-09 16:00:59 发布
最新推荐文章于 2024-01-09 16:00:59 发布
阅读量214 收藏
点赞数
分类专栏： java随记 文章标签： 字符串 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014104653/article/details/121368897
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>compute、watch的使用</title>
    <script type="application/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        table,td{
            border: 1px solid red;
            table-layout: fixed;
            text-align: center;
        }
        div {
            line-height: 40px;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>{{ num }}</div>
        <div>getFullName:(){{ getFullName() }}</div>
        <div>fullName:{{ fullName }}</div>
        <div>otherName:{{ otherName }}</div>
<!--        <div>getFullName{{ getFullName }}</div>-->
        <button v-on:click=" num++ ">add</button>
        <button v-on:click=" firstName+=num ">change</button>
        <button v-on:click=" changeFullName() ">changeFullName</button>
        <button v-on:click=" changeOtherName() ">changeOtherName</button>
        <table>
            <caption>演员表</caption>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>性别</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in getPersons()">
                    <td>{{index}}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.sex }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
    <script>
        new Vue({
            el: "#app",
            data: {
                num: 0,
                color: "red",
                phone: "HuaWei",
                firstName: "Wei",
                lastName: "tieJi",
                person: [
                    {
                        name:"刘德华",
                        sex:"男"
                    },
                    {
                        name:"王菲",
                        sex:"女"
                    }
                ]
            },
            methods: {
                getFullName: function () {
                    let randomStr = Math.random()*10;
                    return this.firstName +randomStr + this.lastName;
                },
                getPersons: function () {
                    let name = Math.floor(Math.random()*10);
                    let sex = "男";
                    if(name > 4){
                        sex = "女";
                    }
                    let newData = {
                        name:"刘德华"+name,
                        sex:sex
                    };

                    let data = [
                        {
                            name:"刘德华",
                            sex:"男"
                        },
                        {
                            name:"王菲",
                            sex:"女"
                        }
                    ]
                    data.push(newData);
                    return data;
                },
                changeFullName(){
                    this.fullName= "刘德华";
                },
                changeOtherName(){
                    this.otherName = "abcde";
                }
            },

            /*
            *  computed  计算属性
            *   1、利用函数来生成一个新的属性（记住：生成的是属性不是方法）
            *   2、computed属性有依赖缓存：只有生成该属性的方法里的属性值（来源于data中的数据）发生改变，才会执行属性对应的方法;不发生改变从缓存中取值
            *   3、不接受传入参数，数据都是从data中获取
            *   4、通过get和set函数来对生成的新属性进行获取和赋值
            *       -- get用来获取值
            * */
            computed: {
                fullName: {
                    get: function () {
                        // alert("执行get方法");
                        return this.firstName  + this.lastName;
                    },
                    set: function (val) {
                        // alert("执行set方法"+val);
                        this.firstName=val.charAt(0);
                        this.lastName =val.split("").splice(1).toString();
                    }
                },
                // fullName: function () {
                //     let randomStr = Math.random()*10;
                //     return this.firstName +randomStr + this.lastName;
                // },

                /**
                 *  split方法将字符串分割为数组，当传递为空字符串时，将字符窜分割为单个字符的字符数组
                 *  字符串可以直接调用其下标来获取对应的字符值
                 *
                 *  splice方法是数组的方法，非常有意思
                 *  let val = 'abcde;
                 *  eg: let middle = val.split("");
                 *  middle为数组，middle.splice(2)造成的结果是middle被分割，middle值为剩下来的部分，而
                 *  middle.splice(1)则是截取的部分，返回值类型也是数组
                 *  这样的话 var jieQuBuFen=middle.splice(2); jieQuBuFen为数组['c','d','e'];而middle则变为['a','b']
                 *  所以很有意思，java中的数组没有这样的方法
                 */
                otherName:{
                    get: function(){
                        // alert("执行get方法");
                        return this.firstName  + this.lastName;
                    },
                    set: function(val){
                        console.log(val+"==val-other");
                        // alert("执行set方法"+val);
                        let middle = val.split("");
                        // console.log("middle");
                        // console.log(middle);
                        // let jieQuBuFen = middle.splice(2);
                        // console.log("jieQuBuFen");
                        // console.log(jieQuBuFen);
                        // console.log("middle截取后剩下");
                        // console.log(middle);
                        this.lastName = middle.splice(2).toString()
                        console.log("lastName==="+this.lastName)
                        this.firstName = middle.toString();
                        console.log("firstName==="+this.firstName)
                    }
                }
            }
        })
    </script>
</html>

qingfengvssuibian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
compute-correlation：一种用于计算两个数组之间的相关性的程序包。 简单，无依赖性
02-11
计算相关 这是什么 一个简单的节点程序包，用于计算两个数组的。 无需依赖。 安装 与任何其他节点包一样： npm install calculate-correlation 用法 包导出功能。 该函数接受两个必需的参数：两个长度相等的数字数组。 该函数返回两个数字数组的相关系数。 该函数还接受第三个可选参数，即配置对象。 以下是有关它的更多信息。 例子 如下使用它： // import the fn const calculateCorrelation = require ( "calculate-correlation" ) ; // given 4 points: (2,3), (5,3), (4,6) and (1,7) const x = [ 2 , 5 , 4 , 1 ] ; const y = [ 3 , 3 , 6 , 7 ] ; const correlation
VUE之计算属性&侦听器&方法
lwaner的博客
10-12 203
VUE之计算属性&侦听器&方法 （1）字符串截取操作 （1）substring 作用：用于提取字符串中介于两个指定下标之间的字符 语法：substring(start,end) 语法解析：start开始和end结束的位置，从零开始的索引，包头不包尾 定义：提取指定字符串中介于两个指定参数下标之间的字符 参数描述：如图所示 1、只有一个参数（自动输出后面所有字符） 2、start...
04-Vue的计算属性computed
PP_zi的博客
07-21 592
在vue实例中，除了el、data、methods外，还存在一个叫做computed的计算属性，在计算属性中也是添加方法，但是调用的时候不用添加括号。 1、字符串操作 计算属性可以将两个字符串做拼接操作，简单的代码示例如下： <div id="app">{{fullname}}</div> <script> const app = new Vue({ el:'#app', data:{ firstnam
实现mini-vue之 computed，watch ，数组响应式的实现
听雨少年的博客
04-16 936
computed 续上文—：有关vue源码的简单实现 实现一个属于自己的min-vue 本文实现： computed watch array的响应式劫持 计算属性： 计算属性：依赖的值发生改变 才会重新执行用户的方法 计算属性需要维护一个dirty属性。而且在默认情况下，计算属性不会立刻执行，而是在用户取值的时候才会执行。 计算属性使用的两种方式： computed: { /** * 计算属性：依赖的值发生改变 才会重新执行用户的方法 计算属性需要维护一个dirty属性
VUE的computed计算属性——数组的反转、格式的修改、 数组的截取、VUEX获取state
HarryHY的博客
10-08 6376
定义 类型：{ [key: string]: Function | { get: Function, set: Function } } 详细： 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。 注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。 ...
Vue中computed改变数组内数据类型
qq_39695210的博客
12-18 786
Vue中computed用法
vue computed计算不到数组或者对象的变化
最新发布
w710537643的博客
01-09 1088
想要computed 监听计算改变后所有score的和但是 computed并不监听。
Vue3进阶：计算属性（computed）的介绍、使用详解和代码实战案例
SteveRocket's-Blog
12-17 6415
Vue 3中的计算属性是Vue中的一种特殊属性，它基于现有数据进行计算（根据其他属性的值进行动态计算），并返回一个新的值。与方法（methods）相比，计算属性的特点是具有缓存机制，只有依赖的数据发生改变时才会重新计算。关于methods的使用可以参考公众号CTO Plus前面的文章，当然后面的文章也会专门做介绍。计算属性在Vue开发中非常常用，它既能提升开发效率，又能使代码更加简洁和可读性更高。在本文中，我将为大家详细介绍Vue 3中的计算属性的概念、用法和优势。
computed 计算属性 的用法
qq_45500519的博客
06-10 465
computed 计算属性 的用法
Vue的computed计算属性监听不到数组或者对象属性的变化
热门推荐
weixin_54257364的博客
04-23 1万+
data里面是这样定义 arr:[], obj:{} 在methods中的某个事件会改变数组/对象中的元素 clickBtn () { 　　this.arr[0] = false 或this.arr = [false] } //或者 clickBtn () { 　　this.obj = { 　　 test:12312 　　} 　　或 　　this.obj.test =12312 } 但在computed中监听不到这个数组中元素的变化 isAble() { //数组 　　if (
Vue计算属性computed简介及简单用法（表格筛选）
q476584989的博客
11-28 9839
Vue计算属性computed简介及简单用法（表格筛选） 简介 在vue中一些数据经常依赖于别的数据，随之改变，且改变的逻辑也较复杂，这个时候就需要用到计算属性computed。 基本语法： ...
【Vue3 知识第八讲】computed 计算属性基础知识详解
前端知识分享喵
09-04 833
computed 计算属性基础知识详解
computed的getter 和setter 方法 、 一些常用数组方法 和本地储存空间、会话储存空间 、cookie
m0_71459231的博客
08-17 845
学习内容
computed函数的使用
weixin_46372993的博客
08-06 1085
computed计算属性函数
计算属性和 方法和 侦听器
Allen的博客
10-08 571
一.计算属性： 我们在开发当中通常会遇到这种情况，需要返回的是两个变量的计算值 ，那我们就在computed属性中去定义计算的方法： eg： 我们现在有两个变量：fristname 和 lastname 。我们想要页面输出的是fullname 全名: 方法一：用computed计算属性来实现（内置缓存机制） 当更改age的时候， fullName 函数不执行； 只有当更改 firstname或 lastname fullname才会执行 data(){ return{ firstname:'hani'
浅谈Vue中计算属性（computed）
He_9a9的博客
09-06 1086
浅谈vue中的computed的属性概念，使用场景，优缺点以及实现缓存的过程
vue3的api解读-computed
qq_35729091的博客
06-07 608
思考2：如果vue3不提供computed，我们自己可以实现吗？很困难，不好写，我们需要知道所有的依赖【watch这个依赖】，进行缓存。思考1：什么时候用computed？当有昂贵的计算时，当有1w+个数据需要排序时。
vue中watch的详细用法
qq_43159578的博客
08-27 186
在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法： <input type="text" v-model="cityName"/> new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... } } }) 直接写一个监听处理函数，当
Vue中使用computed实现数组中每个对象里面的内容保留小数且为null的让内容为无
KeepSober_D的博客
08-04 1446
首先说一下问题，开发中遇到一个需求是这样的，需要将接口中返回的数据做一个处理，这个数据格式是一个大的数组中包很多对象，每个对象中是一个个字段，那些字段有的是小数，有的是整数，整数的话不用处理，小数就得保留4位；本来是打算一个一个处理的，但是因为数据量太大，就想了想借助computed写了一个方法； HTML 这是其中一个数组 <tr v-for="(item, index) in companyList" :key="index"> <td colspan="2"&gt
使用computed截取字符串
12-12
使用computed截取字符串的方法如下所示： ```javascript data() { return { ipaddr: '192.168.100.110', }; }, computed: { // 截取ip地址的第二个到第五个数字 subIp() { return this.ipaddr.split('.').slice(1, 5).join('.'); }, }, ``` 在上述代码中，我们首先定义了一个data属性ipaddr，它的值为一个IP地址字符串。然后我们使用computed属性subIp来截取这个IP地址字符串的第二个到第五个数字，并将它们拼接成一个新的字符串。具体来说，我们首先使用split()方法将IP地址字符串按照点号分割成一个数组，然后使用slice()方法截取这个数组的第二个到第五个元素，最后使用join()方法将这四个元素拼接成一个新的字符串。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值