vue.Comment lier des propriétés

Méthode d'attribut de liaison Vue : 1. Liaison de classe, le code est [6d2cade3083dc4800fc39e76f2ad81e5item ---- key]; est [

L'environnement d'exploitation de ce tutoriel : Windows10 system, vue2.9, cet article s'applique à toutes les marques d'ordinateurs

[Articles connexes recommandés : vue.js]

reliure vue. Méthodes de définition des attributs :

1. Liaison d'attribut (2 façons)

<!-- 绑定属性 -->
<div v-bind:title="title">鼠标hover</div>
<div :title="title">鼠标悬浮</div>
<!-- 绑定地址 -->
<img v-bind:src="url" height="400" width="600"/>
<!-- html页面渲染 -->
<!-- 直接数据绑定 -->
<div>{{html}}</div>
<!-- 绑定html属性解析 -->
<div v-html="html"></div>
#js代码
<script>
    export default {
        name: &#39;app&#39;,
        data() {
            return {
                msg: &#39;vue demo&#39;,
                title: &#39;这里是一个title&#39;,
                url: &#39;https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561705454&di=33c13bd9a15f514bae71aaf8250ff305&imgtype=jpg&er=1&src=http%3A%2F%2Fp3.ssl.qhimg.com%2Ft017c9d8f1ba39d313f.jpg&#39;,
                html:&#39;<h3>我是HTML文本</h3>&#39;
            }
        }
    }
</script>

2. Une autre façon de lier les données

<!-- text数据绑定 -->
<div v-text="msg"></div>

3.

#html
<div>
    <h3>div颜色列表</h3>
    <ul>
        <!-- 简单绑定class -->
        <li v-bind:class="&#39;red&#39;">
            item ---- key
        </li>
        <br/>
        <!-- 列表绑定 -->
        <li v-for="(item,key) in list" :class="{&#39;red&#39;:key ==0,&#39;blue&#39;:key==1,&#39;green&#39;:key==2,&#39;pink&#39;:key==3}">
            {{item}} ---- {{key}}
        </li>
    </ul>
</div>
#js代码
export default {
    name: &#39;app&#39;,
    data() {
        return {
            list: [&#39;红色&#39;, &#39;蓝色&#39;, &#39;绿色&#39;, &#39;粉色&#39;],
        }
    }
}

4. Liaison de style

<!-- style绑定 -->
<div class="box" v-bind:style="{height:heightMax+&#39;px&#39;,width:widthMax+&#39;px&#39;}">这里是一个div盒子</div>
#js代码
export default {
    name: &#39;app&#39;,
    data() {
        return {
             widthMax: 400,
             heightMax: 200,
        }
    }
}

Recommandations d'apprentissage gratuites associées :

JavaScript (vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript vue.js class JS li

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn