vue.How to bind properties

Vue binding attribute method: 1. Class binding, the code is [

item ---- key]; 2. Style binding The code is [

##The operating environment of this tutorial: windows10 system, vue2.9, this article applies to all brands of computers.

[Recommended related articles:

vue.js]

vue binding Methods of defining attributes:

1. Attribute binding (2 ways)

<!-- 绑定属性 -->
<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. Another way of data binding

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

3. class Binding

#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, style binding

<!-- 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,
        }
    }
}

Related free learning recommendations:

JavaScript (video)

The above is the detailed content of vue.How to bind properties. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn