js字符串截取

最新推荐文章于 2023-02-24 04:05:41 发布

今晚来我家吗

最新推荐文章于 2023-02-24 04:05:41 发布

阅读量100

点赞数

分类专栏： js字符串截取

本文链接：https://blog.csdn.net/qq_43059898/article/details/112869815

版权

Vue 条件渲染数据绑定组件状态管理

关键词由CSDN通过智能技术生成

js字符串截取专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <div v-for="item in list">
            <div v-if="item.status === 2">
                <span>{{getTopInfo(item)}}</span>
                <span @click="ent()" style="color: blue">{{item.title}}</span>
                <span>{{getAfterInfo(item)}}</span>
            </div>
            <div v-else @click="ent()" style="color: blue">{{item.text}}</div>
        </div>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                list: [
                    {
                        status: 1,
                        text: '标题1'
                    }, 
                    {
                        status: 2,
                        title: '标题2',
                        text: '11111,标题2,2132131321',
                    },
                    {
                        status: 3,
                        text: '标题3',
                    },
                ],
            }
        },
        methods: {
            getTopInfo(row) {
                return row.text.substring(0, row.text.indexOf(row.title))
            },
            getAfterInfo(row) {
                return row.text.substring(row.text.indexOf(row.title) + row.title.length , row.text.length)
            },
            ent() {
                console.log(1)
            }
        },
    })
</script>

</html>