Vue
关注
分享
扫一扫
Vue 学习交流
卡卡西Sensei
这个作者很懒，什么都没留下…
展开
-
vue 表单验证 支持6位小写字母和数字组合，必须包含2位字母
rules: [ { required: true, message: "XXX不能为空", trigger: "blur" }, { max: 6, message: "最大长度为6位字符", trigger: "blur" }, { pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母 // /^(?=.*[a-z]{2})[a-z0-9]...原创 2021-03-29 17:18:31 · 2169 阅读 · 0 评论 -
:visible.sync 的作用
我们在前端开发中经常看到:visible.sync这种修饰符，很多人不知道这是干什么的，特别是在使用ElementUI的时候， 里面有个弹窗el-dialog组件的时候会有用到:visible.sync<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button><el-dialog title="提示" :visible.sy...原创 2021-02-23 15:45:15 · 67387 阅读 · 10 评论 -
Vue 过滤器filters
1、什么是过滤器？ 说到过滤，我们生活中也经常有过滤的操作，洗菜用筛子过滤掉水，实验室做化学实验过滤掉杂质。 而开发中的过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。2.过滤器的定义过滤器分为局部和全局过滤器局部过滤器new Vue({ filters: { '过滤器名称': function (value1[,value2,...] ) { ...原创 2021-01-04 15:08:03 · 691 阅读 · 0 评论 -
vue js删除数组中指定索引的元素
在前端开发中，我们经常需要对数组进行操作，增删改是经常的事情，那我们js中该如何删除指定的下标元素呢？？？？我们用splice来操作1.定义和用法splice() 方法用于添加或删除数组中的元素。注意：这种方法会改变原始数组。数组中添加新元素：var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.splice(2,0,"Lemon","Kiwi");fruits输出结果：Banana,Orange,Le.原创 2020-12-31 11:11:57 · 14717 阅读 · 0 评论 -
Vue指令之v-show
Vue指令之v-showv-show指令，根据表达式的真假来显示元素和隐藏，是响应式的v-show 指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。1.html、js 代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="...原创 2020-11-19 15:50:58 · 3252 阅读 · 0 评论 -
Vue指令之v-if
Vue指令之v-ifv-if指令根据表达式的值的真假，切换元素的显示和隐藏，其实是在操作dom元素;v-if和js里的if差不多，也会有v-else-if和v-else，js里的if判断是用于在js语法里面的判断，v-if在vue中是对于代码块的判断； 如 <p v-if="isShow">不装了，我摊牌了，没错你要找的就是我</p>当指令的判断isShow为true时，p标签则会生成，进而在页面中显示出来，反之在编...原创 2020-11-23 14:21:47 · 23140 阅读 · 0 评论 -
Vue指令之v-text
Vue指令之v-text目录1.v-text该怎么使用呢？？？2.插值表达式3.总结：v-text 指令一看就是和文本有关系，没错其实就是设置标签的文本值（textContent）。1.v-text该怎么使用呢？？？我们先在被vue实例挂载的标签div中，放入一个h3标签，在h3标签内部写入v-text指令，<h3 v-text="name"></h3> ，那么name的值哪里来呢？...原创 2020-11-30 13:59:30 · 6118 阅读 · 0 评论 -
Vue指令v-show和v-if的区别
v-if和v-show是在前端开发中是比较常用的Vue指令，经常用来判断渲染部分代码块原创 2020-11-27 10:49:23 · 41301 阅读 · 5 评论 -
Vue指令之v-html
Vue指令之v-htmlv-html指令是设置innerHTML1.v-html该怎么使用呢？？？我们先在被vue实例挂载的标签div中，放入一个p标签，在p标签内部写入v-html指令，<p v-html="name"></p> ，那么name的值哪里来呢？这就需要在data中去定义了，对于普通的文本和v-text没有什么差异，但是对于html结构就不一样了，它就会被解析出来，如下代码：2.普通文本：...原创 2020-12-01 16:29:26 · 56948 阅读 · 0 评论 -
Vue指令之v-on
Vue指令之v-on目录Vue指令之v-on1.v-on怎么使用？2.事件名到底写什么呢？3.方法名在哪里定义呢？4.v-on的简写5.访问data中的数据,通过this关键字6.总结v-on指令是事件绑定指令，当用户需要点击，按下键盘，滚动鼠标等操作时，想要添加一些自己的逻辑处理时，就可以为特定的元素绑定一些特定的事件。我们先在被vue实例挂载的标签div中，放入一个按钮为input标签，在标签内部写入v-on指令，冒号(:)后面就是事件名，等号(=)后面就是需..原创 2020-12-07 15:15:19 · 11540 阅读 · 0 评论 -
Vue指令之v-bind
Vue指令之v-bindv-bind指令是专门操作属性的指令，什么是属性？例如设置图片是src，设置鼠标悬停的文本是title，还有类class等。其实元素的属性有很多中，都是写在元素的内部。那该如何设置属性呢，v-bind改如何使用呢？1.如何使用v-bind指令语法是v-bind:属性名=表达式固定写法：<img src="图片地址"/>那要设置属性就是这么写(v-bind写法)，图片的src属性的值就是...原创 2020-12-11 13:40:17 · 1180 阅读 · 0 评论 -
Vue 当中的计算属性computed
目录1.普通写法举例2.计算属性写法举例3. computed vs methods4. computed setter 和getter5.总结计算属性关键词: computed计算属性在处理一些复杂逻辑时是很有用的。1.普通写法举例可以看下以下反转字符串的例子：<div id="app"> <h2>{{ name.split('').reverse().join('') }}</h2></div><d原创 2020-12-16 11:03:55 · 775 阅读 · 0 评论