sunngi-CSDN博客

原创【Js-day3】选项卡切换

原理：点击当前选项卡时，将所有选项卡清除类名，为当前选项卡添加类名（排他）原生js代码：function init() { let tabs = document.querySelector(".tabs").getElementsByTagName("div"); let content = document.querySelector("#content").getElementsByTagName("div"); for (let i=0; i<tabs.length; i

2022-03-30 15:47:01 1358

原创【Vue-day5】模糊查询

1、使用indexOf查询computed: { filteredList() { // TODO: 请补充代码 return this.filteredList = this.postList.filter(item => { return item.title.indexOf(this.search) != -1; }) }, },2、使用includes查询

2022-03-24 23:25:54 337

原创【Js-day2】随机数

下面取2~5的随机数（不包括5）公式为：min+Math.floor(Math.random()*(Max-min))const number = Math.floor(Math.random() * (5 - 2)) + 2;console.log(number);下面取2~5的随机数（包括5）公式为：min+Math.floor(Math.random()*(Max-min+1))const number = Math.floor(Math.random() * (5 - 2 + 1)

2022-03-24 23:13:42 523

原创【Vue-day4】脚手架文件结构

├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ └── HelloWorld.vue │ │── App.vue: 汇总所有组件 │ │─...

2022-03-09 16:15:37 761

原创【Vue-day3】收集表单数据

收集表单数据：若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。账号：<input type="text" v-model.trim="account"> 密码：<input type="password" v-model="password">若：输入需要控制为Number类型，则页面和Vue都设置为number。年纪：<input type="n...

2022-03-06 23:18:17 284

原创【Vue-day3】模糊查找

部分代码如下：var vm = new Vue({ el: "#root", data: { keyWord: "", sortType:0, persons: [ { id: '001', name: '马冬梅', age: 30, sex: '女' }, { id: '002', name: '周冬雨', age: 31, sex:

2022-03-06 21:51:51 411

原创【Vue-day3】Vue监视数据的原理

Vue监视数据的原理： 1. vue会监视data中所有层次的数据。 2. 如何监测对象中的数据？通过setter实现监视，且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性，Vue默认不做响应式处理 (2).如需给...

2022-03-06 21:31:41 95

原创【Js-day1】数组去重扁平化(flat)

被操作数组 const arr=[[1,2,2],[3,4,5,5],[6,7,8,9,[11,12,[12,12,[13]]]],10];使用flat函数进行扁平化，函数参数为操作层级，infinity为展开任意深度的嵌套数组。在使用Set进行去重，用三点运算符展开即可...new Set(arr.flat(Infinity))...

2022-03-06 10:26:01 254

原创【Vue-day2】搭建Vue-cli的Demo

步骤一：安装Node.js，下载地址：下载 | Node.js 中文网下载后可以查看版本号步骤二：

2022-03-05 23:09:28 340

转载【Vue-day2】关于v-for中：key的作用和原理

截取自：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili

2022-03-05 21:02:41 79

原创【Vue-day2】组件基础

#data必须是一个函数当我们定义这个 <button-counter> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：data: { count: 0}取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：data: function () { return { count: 0 }}如果 Vue 没有这条规则，点击一个按钮就可能会影响到其它所有实例转载自Vue文档:组件基

2022-03-05 15:13:36 65

原创【Vue-day1】axios使用方法

当使用axios进行数据交互时，如果使用function的方式对函数进行定义，则当前函数的this是window。axios.get(地址?查询字符串).then(function(response){ console.log(this); //此时this为Window对象},function(err){})当使用箭头函数时，this会指向上一级（父级）的this，更易于操作。axios.get(地址?查询字符串).then((response)=> { con

2022-03-03 23:32:06 96

原创【Vue-day1】Vue获取Html标签中的值

方法1：在自定义函数中加上$event，在js函数中可以获取到点击事件的标签，从而获取对应标签的值，易于分离。Html代码：<a href="javascript:;" @click="getCity($event)">北京</a>Js代码：getCity:function(event){console.log(event.target.innerHTML);}方法2：vue的ref和$refs方法（在Js中test不知道如何分离多...

2022-03-03 16:46:05 7269 1

m0_57450589的博客