vue学习之v-model和v-bind

v-model 能轻松实现元素间的双向数据绑定。

v-bind 能实现组件元素属性的绑定。

例子

这里写图片描述

代码如下:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>vue</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <p v-bind:style="theStyle">
            {{message}}
        </p>
        <input v-model="message">
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message:"Hello Vue.js",
                theStyle:'color:red'
            }
        })
    </script>
</body>

</html>

v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写:

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

猜你喜欢

转载自blog.csdn.net/summerpowerz/article/details/80686696