Vue ref用法 -- 朋友圈全文收起

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>

示例下载：https://ext.dcloud.net.cn/plugin?id=1053