v-for多個input的元素，如何選取其中某個，重新渲染為其他元素呢，比如把其中某個input渲染成span

請問各位又遇到過類似的需求嗎，v-for出來的input，需要改變其中個別input為其他元素
該如何操作呢？？？

回答

編輯回答

怪痞

寫了一個簡單的例子，希望能幫助你理解，并能根據你的實際需求去選擇使用怎樣的方式解決問題！

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>tab</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in mocks">
                <input type="text" v-model="item.val" v-if="item.isInp">
                <span v-else>{{item.val}}</span>
            </li>
        </ul>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    mocks: [
                    {
                        isInp: true,
                        val: "1"
                    },
                    {
                        isInp: true,
                        val: "2"
                    },
                    {
                        isInp: false,
                        val: "3"
                    },
                    {
                        isInp: true,
                        val: "4"
                    }]
                }
            },
            methods: {
            }
        })
    </script>
</body>
</html>

簡易組件版：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>tab</title>    
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in mocks">
                <my-component v-bind="item"></my-component>
            </li>
        </ul>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
    <script type="text/javascript">
        //全局組件注冊
        Vue.component('my-component', {
            template: '<input type="text" v-model="val" v-if="isInp"><span v-else>{{val}}</span>',
            props: ['isInp','val']
        })
        new Vue({
            el: '#app',
            data() {
                return {
                    mocks: [
                    {
                        isInp: true,
                        val: "1"
                    },
                    {
                        isInp: true,
                        val: "2"
                    },
                    {
                        isInp: false,
                        val: "3"
                    },
                    {
                        isInp: true,
                        val: "4"
                    },]
                }
            },
            methods: {
            }
        })
    </script>
</body>
</html>