首页 > 其他 > 详细

v-bind:标签和{{}}使用的区别

时间:2020-01-15 11:34:42      阅读:134      评论:0      收藏:0      [点我收藏+]

一般来说,我自己是这样分类使用的,要给html标签动态的通过 vue 来设置属性值,就用 v-bind:*=" " 来进行使用,而一般在html标签的正文部分就是用 {{}} 双括号来进行内容的动态绑定!注意这样的使用规范,混用会取不到值

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--1.导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<!--view层 模板-->
<h1 id="app">{{message}}</h1>
     <span id="app2" v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息!
     </span>

<br/>
同户名:<input id="placehold" type="text" v-bind:placeholder="message"/>



<script>
    var vm = new Vue({
        el: "#app2",
        //Model : 数据
        data:{
            message: "hello,vue!"
        }
    });



var vm = new Vue({
    el: "#placehold",
    //Model : 数据
    data:{
        message: "输入用户名"
    }
});



</script>
</body>
</html>

v-bind:标签和{{}}使用的区别

原文:https://www.cnblogs.com/yuqiliu/p/12195379.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!