vue关于{{}} v-text v-html 和v-model的理解

最新推荐文章于 2023-09-29 21:14:37 发布

旧时梦Cc

最新推荐文章于 2023-09-29 21:14:37 发布

阅读量950

点赞数 1

文章标签： vue.js html 前端

本文链接：https://blog.csdn.net/qq_35394917/article/details/121538554

版权

1.v-text的缩写为 {{}}

2.v-text和v-html都为单项绑定，即就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。因此，我们不需要进行额外的DOM操作，只需要进行Model的操作就可以实现视图的联动更新。

3.v-mdel为双向绑定，即把Model绑定到View的同时也将View绑定到Model上，这样就既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。所以，当我们用JavaScript代码更新Model时，View就会自动更新，反之，如果用户更新了View，Model的数据也自动被更新了。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <!--引入vue-->
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="mydiv">
        <input v-model="model">
        <p v-html="model"></p>
		<p v-text="model"></p>
    </div>
    <script>
       var vm =  new Vue({
            el:"#mydiv",
            data:{
                model:"<h1>v-model测试<h1>"
            }
        })
    </script>
</body>
</html>