Vue点击更换文本内容，多个文本的时候点击一个剩下的跟着变，如何弄成单独的，点击哪段文本更换哪段文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
            <div id="one">
                <template v-if="loginType === 'yes'">
                    <p @click="change">原来的文本</p>
                    </template>
                    <template v-else>
                    <p @click="change">改后的文本</p>
                </template>
                <template v-if="loginType === 'yes'">
                    <p @click="change">原来的文本</p>
                    </template>
                    <template v-else>
                    <p @click="change">改后的文本</p>
                </template>
            </div>
            <script type="text/javascript">
                var vm = new Vue({
                    el: '#one',
                    data: {
                        loginType: 'yes'
                    },
                    methods: {
                        change: function () {
                            if (this.loginType == 'yes') {
                                this.loginType = 'no'
                            } else {
                                this.loginType = 'yes'
                            }
                        }
                    }
                })
            </script>
</body>
</html>

定义不同变量loginType

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
            <div id="one">
                <template v-if="form.loginType === 'yes'">
                    <p @click="change('loginType')">原来的文本</p>
                    </template>
                    <template v-else>
                    <p @click="change('loginType')">改后的文本</p>
                </template>
                <template v-if="form.loginType1 === 'yes'">
                    <p @click="change('loginType1')">原来的文本</p>
                    </template>
                    <template v-else>
                    <p @click="change('loginType1')">改后的文本</p>
                </template>
            </div>
            <script type="text/javascript">
                var vm = new Vue({
                    el: '#one',
                    data: {
                      form: {
                        loginType: 'yes',
                        loginType1: 'yes'
                      }
                    },
                    methods: {
                        change: function (type) {
                            if (this.form[type] == 'yes') {
                                this.form[type] = 'no'
                            } else {
                                this.form[type] = 'yes'
                            }
                        }
                    }
                })
            </script>
</body>
</html>

定义两个不同的变量判断你现在是loginType 再定义一个 loginType1 第二个div使用这个。还得再定义一个 change事件。

如果不想定义两个 change 那就得传参数了