Question

我正在尝试将Vue.js用于一个项目，例如为Mybb或Xenforo制作主题，但是我不确定如何在不破坏脚本或使用无效方法插入脚本的情况下使脚本正常工作码。

在Vue渲染之前，对话框中的文本也会闪烁，但在向应用程序div中添加v-cloak时仍会闪烁（可选，因为这现在不重要）

我正在使用https://vuetifyjs.com/en/，因为我可以在主机中使用CDN，但不能使用软件包。

我找不到其他能帮助我或暗示我的问题的解决方案的资源，因为我找不到遇到此问题的人。

<!DOCTYPE html>
<html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
    <div id="app" v-cloak>
        <v-app>
            <v-layout row justify-center>
                <v-btn color="primary" dark @click.stop="dialog = true">
                    Open Dialog
                </v-btn>

                <v-dialog v-model="dialog" max-width="290">
                    <v-card>
                        <v-card-title class="headline">Use Google's location service?</v-card-title>

                        <v-card-text>
                            Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
                        </v-card-text>

                        <v-card-actions>
                            <v-spacer></v-spacer>

                            <v-btn color="green darken-1" flat="flat" @click="dialog = false">
                                Disagree
                            </v-btn>

                            <v-btn color="green darken-1" flat="flat" @click="dialog = false">
                                Agree
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
            </v-layout>

            <v-card height="200px" flat>
                <div class="headline text-xs-center pa-5">
                    Active: {{ bottomNav }}
                </div>
                <v-bottom-nav :active.sync="bottomNav" :value="true" absolute color="transparent">
                    <v-btn color="teal" flat value="recent">
                        <span>Recent</span>
                        <v-icon>history</v-icon>
                    </v-btn>

                    <v-btn color="teal" flat value="favorites">
                        <span>Favorites</span>
                        <v-icon>favorite</v-icon>
                    </v-btn>

                    <v-btn color="teal" flat value="nearby">
                        <span>Nearby</span>
                        <v-icon>place</v-icon>
                    </v-btn>
                </v-bottom-nav>
            </v-card>
        </v-app>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    bottomNav: 'recent'
                }
            }
        })
    </script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    dialog: false
                }
            }
        })
    </script>
</body>

</html>

我希望对话框出现并且选项卡可以工作，因此我可以将其放在Mybb之类的地方，并且仍然可以正常工作。

如何在Smarty PHP中为Vue.js材质使用多个脚本标签

0 个答案: