Vue ref用法 -- 朋友圈全文收起
2019-11-30 本文已影响0人
wyc0859
1、普通的ref用法
2、for循环中ref用法
3、多个for循环中ref用法
<template>
<view class="content">
<view class="text-area">
<input type="text" ref='x'></input><br>
<button @click='abc'>ref作用于普通的HTML</button>
</view>
<ul>
<!-- 当 ref 在循环中,绑定的是一个普通的HTML元素时 -->
<li v-for="(item,index) of list" :key="index" :ref="index"
@click="one(index)">
{{item}}
</li>
</ul>
<ul>
<!-- 当 ref 在循环中,绑定的是一个普通的HTML元素时 -->
<li v-for="(item,index) of list2" :key="index" :ref="index"
@click="two(index)">
{{item}}
</li>
</ul>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
list:['a','b','c','d'],
list2:['e','f','g','h'],
a:[],
b:[]
}
},
onLoad() {
},
methods: {
abc() {
// 当 ref 总用于普通的HTML元素上时,拿到的就是普通的dom对象.
this.$refs.x.value = '普通的HTML元素'
},
one(index) {
console.log('one:',this.$refs[index][0])
// 当ref作用在循环上时,通过ref绑定的dom,对象是被放在一个数组当中
if(this.$refs[index][0].style.height=='100px'){
this.$refs[index][0].style.height = 'auto';
}
else{
this.$refs[index][0].style.height = '100px';
}
},
//第二个for ref时是$refs[index][1]
two(index) {
console.log('two:',this.$refs[index][1])
if(this.$refs[index][1].style.height=='100px'){
this.$refs[index][1].style.height = 'auto';
this.$refs[index][1].style.background='red';
}else{
this.$refs[index][1].style.height = '100px';
this.$refs[index][1].style.background='#fff';
}
}
}
}
</script>
<style>
li{
background: red;
width:100px;
}
</style>
朋友圈 全文-收起
小程序不支持dom操作，所以ref不起作用的
循环必须是li，换div或view都没效果
<template>
<view class="content">
<ul>
<!-- 当 ref 在循环中,绑定的是一个普通的HTML元素时 -->
<li v-for="(item,index) of list" style="height:70px;" :key="index" :ref="index">
<text v-if="item.is_more==0">{{item.title}}</text>
<text v-if="item.is_more==1">{{item.sort_title}}</text>
<text v-if="item.is_more==2">{{item.title}}</text>
<span v-if="item.is_more>0" @click="one(index)">{{item.is_more==1?'全文':'收起'}}</span>
</li>
</ul>
</view>
</template>
<script>
export default {
data() {
return {
hidden_height:'70px',
title: 'Hello',
list:[
{
title:'中文中文中文中文中文'
},
{
title:'中文中文中文中文中文，中文中文中文中文中文，中文中文中文中文中文，中文中文中文中文中文，中文中文中文中文中文，中文中文中文中文中文，中文中文中文中文中文，中文中文中文中文中文'
},
]
}
},
onShow() {
this.jisuan()
},
methods: {
jisuan(){
const list=this.list
let arr=[]
for (let k in list) {
const v=list[k]
arr[k]={}
if (v.title.length > 20) {
arr[k].title=v.title
arr[k].sort_title=v.title.substr(0,20)
arr[k].is_more = 1;
}
else{
arr[k].title=v.title
arr[k].sort_title=v.title
arr[k].is_more = 0;
}
}
console.log(arr)
this.list=arr
},
one(index) {
if(this.$refs[index][0].style.height==this.hidden_height){
this.$refs[index][0].style.height = 'auto';
this.list[index].is_more=2
//this.$refs[index][0].children[1].innerText="收起"
}
else{
this.$refs[index][0].style.height = this.hidden_height;
this.list[index].is_more=1
}
},
}
}
</script>
<style>
li{
background: red;
width:200px;
word-wrap : break-word;
overflow: hidden;
}
li span{
color:blue
}
</style>
