Vue的属性绑定和双向绑定

冷不防 2021-07-24 18:06 574阅读 0赞

**目录**

一 点睛

二 代码

三 效果

--------------------

# 一 点睛 #

v-model：将标签的value值和Vue实例中的data属性值进行绑定。

v-bind：插值表达式是不能写在html的标签的属性内中的，如果一定要用Vue的属性作为html标签属性的内容，就可以使用v-bind。

# **二 代码** #

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>属性绑定和数据双向绑定</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>    
    </head>
    <body>
        
        <div id="root">
            
            <div v-bind:title="title">hello world</div>
            
            <div :title="'echo:' + title">hello world</div>
            
            <input v-model="content1"/>
            <p>{
       {content1}}</p>
            <input :value="content"/>
            <p>{
       {content}}</p>
        </div>
        
        <script type="text/javascript">
            // 实例
            new Vue({
                el: "#root",
                data: {
                    title: "this is a title",
                    content1:"this is content1:双向绑定",
                    content:"this is content:单向绑定"
                }
                
            })
        </script>
    </body>
    </html>

# **三 效果** #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/e6de8dfec9b040b9a1ddad94cd0718e0.png