hualinux 进阶 vue 1.6：vue命令（二）属性绑定v-bind 双向数据绑定v-model

最新推荐文章于 2024-06-24 08:00:00 发布

hualinux

最新推荐文章于 2024-06-24 08:00:00 发布

阅读量262

点赞数

分类专栏：进阶篇3 vue.js专业前端入门文章标签： hualinux vue vue vue属性绑定双向数据绑定 v-bind v-model

本文链接：https://blog.csdn.net/hualinux/article/details/115459114

版权

进阶篇3 vue.js专业前端入门专栏收录该内容

32 篇文章 4 订阅

订阅专栏

继续vue命令属性绑定v-bind和双向数据绑定

一、属性绑定v-bind（单向）

1.1 用法

单向绑定：数据决定页面的显示，但页面无法决定数据里面的内容。

PS：当我们要把vue中的数据的值，赋值给html其中一个属性怎办？比如<p>标签的 text 属性。

vue为了能让html中的属性进行交互，所以创建了vue属性绑定命令，v-bind:<html属性>=<vue中数据的值> 这样就实现了vue与html的交互了。

单向属性绑定可以使用v-bind

缩写：:
预期：any (with argument) | Object (without argument)
参数：attrOrProp (optional)
修饰符：
- .prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)
- .camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
- .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。
用法：

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。

在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

1.2 例子

1.2.1 没使用v-bind前的例子

<body>
    <div id="root">
        <p title="this is my first vue"> hello {{msg}} </p>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                msg: "vue"
            }
        })
    </script>
</body>

运行效果：鼠标放在hello vue上会显示 “this is my first vue”

1.2.2 使用v-bind绑定

上面例子修改为

<body>
    <div id="root">
          <!--        mytitle为js表达是，是Vue data中的mytitle-->
        <p v-bind:title="mytitle"> hello {{msg}} </p>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                msg: "vue",
                mytitle: 'this is my first vue'
            }
        })
    </script>
</body>

其中

    <!--        mytitle为js表达是，是Vue data中的mytitle-->
    <p v-bind:title="mytitle"> hello {{msg}} </p>

mytitle为js表达是，是Vue data中的mytitle，所以可以加一些字符，或者多个变量

如：

<div id="root">
      <!--        mytitle为js表达是，是Vue data中的mytitle-->
    <p v-bind:title="'^_^ '+mytitle"> hello {{msg}} </p>
</div>

效果为：

也可以加其它变量，如加多一个msg

<div id="root">
      <!--        mytitle为js表达是，是Vue data中的mytitle-->
    <p v-bind:title="msg+' ^_^ '+mytitle"> hello {{msg}} </p>
</div>

效果：最前面多了一个vue

二、双向绑定v-model

2.1 v-model用法

当我们有这么一种需求，我要在html中修改vue中的数据，怎办，那么就可以用到v-model命令了。

input标签内容，可以显示内容也可以改变内容。

双向属性绑定可以使用Vue中的v-model：

预期：随表单控件类型不同而不同。
限制：
- <input>
- <select>
- <textarea>
- components
修饰符：
- .lazy - 取代 input 监听 change 事件
- .number - 输入字符串转为有效的数字
- .trim - 输入首尾空格过滤
用法：

在表单控件或者组件上创建双向绑定。细节请看下面的教程链接。

参考：
- 表单控件绑定
- 组件 - 在输入组件上使用自定义事件

2.2 例子

我在上面例子的基础上添加一个input标签

body>
    <div id="root">
          <!--        mytitle为js表达是，是Vue data中的mytitle-->
        <p v-bind:title="msg+' ^_^ '+mytitle"> hello {{msg}} </p>
        <input  type="text" v-model="msg">
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                msg: "vue",
                mytitle: 'this is my first vue'
            }
        })
    </script>
</body>

运行后如下图所示：

修改上面输入框的内容，发现上面的也变化了

hualinux

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hualinux 进阶 vue 1.6：vue命令（二）属性绑定v-bind 双向数据绑定v-model

目录一、属性绑定v-bind（单向）1.1 用法1.2 例子1.2.1没使用v-bind前的例子1.2.2 使用v-bind绑定二、双向绑定v-model2.1v-model用法2.2 例子继续vue命令属性绑定v-bind和双向数据绑定一、属性绑定v-bind（单向）1.1 用法单向绑定：数据决定页面的显示，但页面无法决定数据里面的内容。PS：当我们要把vue中的数据的值，赋值给html其中一个属性怎办？比如<p>标签的 tex...
复制链接

扫一扫

专栏目录