效果: <iv-for="(item,index) in facilityList":key="index"@click="changeSpan(index);":class="{'bgcolor':spanIndex.indexOf(index)>-1}">{{item}} data:{ spanIndex:[], } methods: { changeSpan(index){ let arrIndex = this.spanIndex.indexOf(index); // console.log(arrIndex); if(ar...
image.png //点击选中selected(index){let arrIndex=this.spanIndex.indexOf(index);console.log(arrIndex);if(arrIndex>-1){this.spanIndex.splice(arrIndex,1);item.isShow=false}else{this.spanIndex.push(index);item.isShow=true}}, image.png ...
1、forEach不能中断循环,若需遍历完成之前返回结果,使用for循环 案例 案例一、多选标签 描述: 一行或多行排列多个标签,当点击时,选中当前项并变色显示并添加到数组,再次点击时取消变色并从数组中移出。 注意事项: 数组是从后台获取的数据,当为数组的对象添加开关变量属性时,应使用res.data.list进行遍历,完成之后再...
如果要为元素的属性动态绑定属性值,就需要用到v-bind属性绑定指令 编译前:<HTML标签名 v-指令名:参数=表达式> 编译后:<HTML标签名 参数=表达式的执行结果>参数名会被编译为属性名 data中的数据每次更新都会导致表达式执行结果改变,表达式结果改变会让模板语句重新编译,也就达到了动态绑定的效果 v-bind:单向数据绑...
开关背景的变色 input的type属性由tel和password切换 图片验证码的点击重刷新 设置一个data属性,叫imgUrl,赋值为API中的验证码请求地址 imgUrl:'http://localhost:4000/captcha' 在标签中绑定src,关联变量imgUrl :src="imgUrl" 给img增加点击事件,每次点击重新给imgUrl赋值 @click="refreshImg" refreshImg(){ ...
h2标签里原本有一个固定的class属性叫line,同时后面交给vue解析的里面有一个对象,对象采用的是键值对的方式存储的,只要某个键(属性)的值为true,那么这个属性就会被启用,否则就不会被启用。总结就是class属性可以用原本固定的,不会被覆盖,只会被合并,:class属性里面可以使用对象来存储,对象里面是键值对的方式存储,...
1.在插值表达式中使用的数据 必须在data中进行了提供{{hobby}} //如果在data中不存在 则会报错2.支持的是表达式,而非语句,比如:if for ...{{if}}3.不能在标签属性中使用 {{ }} 插值 (插值表达式只能标签中间使用)我是P标签 五、响应式特性 1.什么是响应式? 简单理解就是数据变,视图...
Vue3.0-30.Table案例 - 循环渲染Tag标签 02:04 Vue3.0-31.Table案例 - 实现input和button的按需展示 02:47 Vue3.0-32.Table案例 - 实现文本框自动获得焦点的功能 01:33 Vue3.0-33.Table案例 - 文本框失去焦点自动隐藏 04:37 Vue3.0-34.Table案例 - 实现新增Tag标签的功能 04:03 Vue3.0-35.总结 02:05...
登录成功后,需要个用户颁发一个token令牌,才能以令牌方式进入后台页面,重定向home页面,生成token信息1:在数据中我们我们能看到返回的token属性,2:在点击登录成功后,重定向到了home后台主页,并在sessionStorage中保存会话信息,注意:token用于跨域,不跨域长期存储个人信息,推荐localStorage本地会话,临时的则存放在sessionStorage...