AllenWalker1936-CSDN博客

原创 Vue v-for循环中 key 属性的使用

v-for循环中 key 属性的使用使用到的方法unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。key属性使用重点1.v-for 循环的时候， key 属性只能使用 number 获取 string2.key 在使用的时候必须使用 v-bind 属性绑定的形式，指定 key 的值3.在...

2019-04-25 16:31:31 2751

原创 Vue v-for循环

四种v-for循环例子1.循环普通数组<p v-for="(item, i) in list">索引：{{i}} 值为：{{item}}</p>2.循环对象数组<p v-for="(who, i) in list2">索引：{{i}} ID：{{who.id}} 名字为：{{who.name}}</p>3.循环对象<p v-...

2019-04-23 16:50:51 1399

原创 vue中样式

vue中样式（上）代码<!doctype html> <head> <title>vue中样式</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> ....

2019-04-22 15:40:23 326

原创 Vue v-model双向数据绑定和一个简单的整数计算器

一、v-model双向数据绑定方法v-bind - 单向数据绑定（从M到V）v-model - 双向数据绑定例子<input type="text" v-bind:value="msg" style="width:200px">//单向<input type="text" v-model="msg" style="width:200px">//双向TI...

2019-04-18 14:58:32 723

原创 Vue事件修饰符

Vue事件修饰符方法.stop - 阻止冒泡.prevent - 阻止默认行为//例如a标签的链接的弹出.capture - 实现捕获触发事件//从内到外.self - 只有点击当前元素才会触发事件.once - 只触发一次事件处理函数stop与self的区别<div class="outer" @click="div2Handler"> <div cla...

2019-04-17 17:36:29 159

原创 Vue走马灯

Vue走马灯分析给按钮绑定事件，v-on或者@在按钮的事件处理函数中写入相关业务逻辑代码：拿到message字符串，然后用substring方法来截取字符串的第一个字符并放到最后为了一直循环需要把步骤2中代码放入定时器中停止走马灯特效就是清除定时器用到的方法if(){}//判断substring()//截取字符串setInterval()//设置定时器clearInter...

2019-04-17 15:51:29 753

原创 jQuery遍历

一、jQuery祖先方法parent() - 返回直接父元素parents() - 返回所有祖先parentsUntil() - 返回指定之间的所有祖先二、jQuery后代方法children() - 返回直接子元素find() - ("*")返回被选元素的所有后代,(“x”)返回备选元素后代中的x元素三、jQuery同胞方法siblings() - 返回...

2019-04-11 15:49:58 179

原创 jQuery尺寸

jQuery尺寸方法width() - 返回宽度height() - 返回高度innerWidth() - 返回宽度包括内边距innerHeight() - 返回高度包括内边距outerWidth() - 返回宽度包括内边距和边框outerHeight() - 返回高度包括内边距和边框outerWidth(true) - 返回宽度包括内边距和边框以及外边距outerHeigh...

2019-04-10 17:29:59 200

原创 jQuery获取并设置CSS类

jQuery获取并设置CSS类和CSS属性方法addClass() - 向被选元素添加一个或多个类removeClass() - 从被选元素删除一个或多个类toggleClass() - 对被选元素进行添加/删除类的切换操作css() - 设置或返回样式属性设置CSS属性语法1.css(“propertyname”); - 返回指定的CSS属性的值2.css(“propert...

2019-04-10 15:37:27 211

原创 jQuery删除元素

jQuery删除元素方法remove() - 删除被选元素（及其子元素）empty() - 从被选元素中删除子元素代码<!doctype html> <head> <title>jq删除元素</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-...

2019-04-09 17:40:31 860

原创 jQuery添加元素

jQuery添加元素方法append() - 在被选元素的结尾插入内容prepend() - 在被选元素的开头插入内容after() - 在被选元素之后插入内容before() - 在被选元素之前插入内容代码<!doctype html> <head> <title>jq添加元素</title> <script src...

2019-04-09 16:34:18 172

原创 jQuery设置内容和属性

jQuery设置内容和属性一、设置内容以及回调函数方法text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值例子$("#btn1").click(function(){ $("#test1").text("Hello world!");});//设置文本内容$("#btn2...

2019-04-08 16:24:37 951

原创 jQuery 获取

jQuery 获取内容方法text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值语法$("#btn1").click(function(){ alert("Text: " + $("#test").text());});//文本$("#btn2").click(function...

2019-04-03 17:04:41 210

原创 jQuery chaining

jQuery chaining介绍Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。如需链接一个动作，您只需简单地把该动作追加到之前的动作上。代码<!doctype html> <head> <title>JQuery Chaining</title> <script src="h...

2019-04-03 16:05:44 193

原创 jQuery Callback

jQuery Callback语法$(selector).hide(speed,callback)//hide只是个栗子代码<!doctype html> <head> <title>JQuery Callback</title> <script src="http://ajax.aspnetcdn.com/ajax/j...

2019-04-02 17:01:29 270

原创 jQuery 停止动画

jQuery 停止动画方法stop()语法$(selector).stop(stopAll,goToEnd);代码<!doctype html> <head> <title>jq停止动画</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1...

2019-03-29 17:28:42 324

原创 jQuery效果 - 动画

jQuery效果 - 动画方法animate()语法$(selector).animate({params},speed,callback);代码<!doctype html><html> <head> <title>jq动画</title> <script src="http://ajax.aspn...

2019-03-28 17:21:59 144

原创 jQuery效果 - 滑动

jQuery效果 - 滑动方法slideDown()slideUp()slideToggle()语法$(selector).slideDown(speed,callback);//向下滑动$(selector).slideUp(speed,callback);//向上滑动$(selector).slideToggle(speed,callback);//切换代码<...

2019-03-28 16:24:29 169

原创 jQuery效果 - 淡入和淡出

jQuery 效果 - 淡入和淡出方法fadeIn()fadeOut()fadeToggle()fadeTo()语法$(selector).fadeIn(speed,callback);//淡入$(selector).fadeOut(speed,callback);//淡出$(selector).fadeToggle(speed,callback);//切换$(selec...

2019-03-28 14:32:40 207

原创 jQuery效果 - 隐藏和显示

jQuery效果 - 隐藏和显示代码<!doctype html><html> <head> <title>jq隐藏与显示</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> &...

2019-03-28 13:49:37 254

AllenWalker1936的博客