zoukankan      html  css  js  c++  java
  • v-bind:标签和{{}}使用的区别

    一般来说,我自己是这样分类使用的,要给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>
    
  • 相关阅读:
    树的前序 中序 后序遍历
    算法入门经典-第四章 例题4-3 救济金发放
    算法入门经典-第五章 例题6-10 下落的树叶
    排序(三) 选择排序

    printf格式输出总结
    并查集
    异或的应用
    ActionContext详解
    ActionContext表格总结
  • 原文地址:https://www.cnblogs.com/yuqiliu/p/12195379.html
Copyright © 2011-2022 走看看