欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

解决代码加载慢,以至于乱码—————VUE

程序员文章站 2022-07-02 13:10:25
vue.js解决开始代码加载,以至于乱码 vue.js通过几行代码可以解决这个问题 css: html: 使用后会等vue加载完再呈现效果,就不会出现,代码在视图里了。 顺带介绍几个基础的vue api。 绑定css样式: css: html: v bind:class="{done样式:这是样式中 ......

vue.js解决开始代码加载,以至于乱码

vue.js通过几行代码可以解决这个问题

css:

[v-cloak] {
            display: none;
        }

html:

<div id="app" v-cloak></div>

使用后会等vue加载完再呈现效果,就不会出现,代码在视图里了。

顺带介绍几个基础的vue api。

绑定css样式:

css:

.done {
            text-decoration: line-through;
            color: #ccc;
        }

html:

<span v-bind:class="{done:item.done}">
    {{item.title}}</span>

v-bind:class="{done样式:这是样式中的:这是item中的某一些进行筛选,item.done是true的那些选择} "

点击事件:

v-on:click="这里写个事件"

@click=“”和上面的一样

const app = new vue({
                el: '#app',
                data: {
                    todos,
                    todotext: ''
                },
                methods: {
                    handleaddtodoclick() {
                        xxxxx
                    }
}

绑定按键:

<input type="text" value="" v-model='todotext' @keydown.enter="handleaddtodoclick" />

这是绑定回车。

后面有机会再写点别的。