今天是学习的第六天，把以前的重新回顾一次，加深记忆
v-for列表循环和复选框展示 < template> < view> < viewclass = " box" v-for = " (item , index) in 10" > </ view> < viewv-for = " (item,index) in nba" :key = " index" > </ view> </ view> < viewclass = " out" > < viewclass = " box" v-for = " (item,index) in goods" :key = " item.id" > < checkbox-group@change = " getHander" > < checkbox:value = " item.name" :checked = " item.checked" /> < textclass = " title" > </ text> < textclass = " del" @click = " remote(index)" > </ text> </ checkbox-group> </ view> </ view> </ template> < scriptsetup >
import {
ref
} from 'vue' ;
const goods = ref ( [ {
id : 11 ,
name : "小米" ,
checked : true
} ,
{
id : 12 ,
name : "华为" ,
checked : false
} ,
{
id : 13 ,
name : "苹果" ,
checked : false
} ,
{
id : 14 ,
name : "三星" ,
checked : false
}
] ) ;
const nba = ref ( [ {
id : 1 ,
name : "乔丹" ,
num : 23
} ,
{
id : 2 ,
name : "詹姆斯" ,
num : 17
} ,
{
id : 3 ,
name : "科比" ,
num : 7
}
] ) ;
function remote ( index ) {
goods. value. splice ( index, 1 ) ;
}
function getHander ( e ) {
console. log ( e) ;
}
</ script> < stylelang = " scss" scoped >
.out {
padding : 10px;
.box {
padding : 10px;
.del {
color : red;
margin-left : 30px;
}
}
}
</ style> 以上还有使用的checkbox ，也使用了checkbox -gooup，这个本来是想着做一个关联的复选框，最后没做出来，先记录下，后期完善
input组件、v-model 、深入：添加一个获取焦点得到一个小图片 < template> < viewclass = " out" > < inputtype = " text" v-model = " inpValue" @focus = " isActivity=true" @blur = " isActivity=false" @confirm = " onConfirm" /> < imagesrc = " ../../static/chicken.gif" mode = " " class = " pic" :class = " isActivity ? 'active' : '' " > </ image> </ view> < viewclass = " " > </ view> </ template> < scriptsetup >
import { ref } from 'vue' ;
const inpValue= ref ( "" )
const isActivity= ref ( false )
function onConfirm ( e ) {
console. log ( e) ;
}
</ script> < stylelang = " scss" scoped >
.out {
padding : 0 20px;
margin-top : 40px;
position : relative;
input {
border : 1px solid red;
height : 40px;
position : relative;
//position 属性用于指定一个元素在文档中的定位方式
// 定位元素（positioned element）是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素
// （换句话说，除static以外的任何东西）。
// 相对定位元素（relatively positioned element）是计算后位置属性为 relative的元素。
// 绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 或 fixed 的元素。
// 粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。
z-index : 2;
//z-index 属性设置定位元素及其后代元素或 flex 项目的 Z 轴顺序。z-index 较大的重叠元素会覆盖较小的元素。
//auto盒子不会创建一个新的局部层叠上下文。盒子在当前层叠上下文的层叠等级是 0。
// <integer>盒子在当前层叠上下文的层叠等级就是 <integer> 的值。盒子还会创建一个局部层叠上下文。
// 这意味着该元素的后代元素不会和该元素的外部元素比较 z-index。
background : white;
}
.pic {
width : 24px;
height : 24px;
z-index : 1;
position : absolute;
top : 0px;
left : calc ( 50% - 12px) ;
transition : top 0.3s;
// 过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，
// 像是 : hover， : active 或者通过 JavaScript 实现的状态变化。
}
.pic.active {
top : -24px;
}
}
</ style> 上面主要需要多练习的是css的样式，会行成一个获取焦点后，给一个小图片的提示，这里图片不能显示出来，
近期所有学习的汇总 < template> < viewclass = " title" > </ view> < viewclass = " out" > < viewclass = " list" > < viewclass = " row" v-for = " (item,index) in lists" :key = " item.id" > < viewclass = " text" > </ view> < viewclass = " close" @click = " onClick(index)" > < icontype = " clear" size = " 26" /> </ view> </ view> </ view> < viewclass = " count" > </ view> < viewclass = " comment" > < inputtype = " text" placeholder = " 请输入热梗..." v-model = " inpValue" /> < buttonsize = " mini" type = " primary" :disabled = " inpValue.length<3 " @click = " onsubmit" > </ button> </ view> </ view> </ template> < scriptsetup >
import {
ref
} from "vue" ;
const inpValue = ref ( "" ) ;
const lists = ref ( [ {
id : 111 ,
title : "刚满18岁"
} ,
{
id : 222 ,
title : "我不吃牛肉"
} ,
{
id : 333 ,
title : "遥遥领先"
} ,
{
id : 444 ,
title : "哪里贵了"
}
] )
function showToast ( ) {
uni. showToast ( {
title : '最少输入三个字符'
} ) ;
}
function onClick ( index ) {
lists. value. splice ( index, 1 )
}
function onsubmit ( ) {
if ( inpValue. value. length < 3 ) {
console. log ( "长度不够" ) ;
showToast ( ) ;
} else {
console. log ( "够了" + inpValue. value. length) ;
lists. value. push ( {
id : Date. now ( ) ,
title : inpValue. value
} ) ;
inpValue. value = "" ;
}
}
</ script> < stylelang = " scss" scoped >
.title {
font-size : 26px;
text-align : center;
color : #3c3c3c;
padding : 30px 0 15px;
}
.out {
width : 90vw;
margin : 15px auto;
box-shadow : 0 10px 20px rgba ( 0, 0, 0, 0.1) ;
border-radius : 5px;
padding : 15px;
box-sizing : border-box;
.list {
.row {
padding : 10px 0;
border-bottom : 1px solid #e8e8e8;
display : flex;
justify-content : space-between;
align-items : center;
font-size : 18px;
color : #333;
.text {
padding-right : 5px;
box-sizing : border-box;
}
}
}
.count {
padding : 10px 0;
font-size : 15px;
color : #888;
text-align : center;
}
.comment {
display : flex;
margin-top : 10px;
input {
flex : 4;
background : #f4f4f4;
margin-right : 5px;
height : 100%;
height : 32px;
border-radius : 4px;
padding : 0 10px;
color : #333;
}
button {
flex : 1;
}
}
}
</ style>
