热搜词
v-bind:标签和{{}}使用的区别
灰儿 管理员 发消息 加好友 打招呼
发表于 2022-7-27 06:42:23 | 显示全部楼层 |阅读模式
一般来说，我自己是这样分类使用的，要给html标签动态的通过 vue 来设置属性值，就用 v-bind:*=" " 来进行使用，而一般在html标签的正文部分就是用 {{}} 双括号来进行内容的动态绑定！注意这样的使用规范，混用会取不到值
  1. <!DOCTYPE html>

  3. <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

  5. <head>

  7.     <meta charset="UTF-8">

  9.     <title>Title</title>

  11.     <!--1.导入Vue.js-->

  13.     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

  15. </head>

  17. <body>

  19. <!--view层 模板-->

  21. <h1 id="app">{{message}}</h1>

  23.      <span id="app2" v-bind:title="message">

  25.     鼠标悬停几秒钟查看此处动态绑定的提示信息！

  27.      </span>

  29. <br/>

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

  33. <script>

  35.     var vm = new Vue({

  37.         el: "#app2",

  39.         //Model : 数据

  41.         data:{

  43.             message: "hello,vue!"

  45.         }

  47.     });

  49. var vm = new Vue({

  51.     el: "#placehold",

  53.     //Model : 数据

  55.     data:{

  57.         message: "输入用户名"

  59.     }

  61. });

  63. </script>

  65. </body>

  67. </html>
复制代码


回复

使用道具 举报

全部评论0
返回列表 发新帖
回复
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

发布新帖

本文内容不够精彩，我要自己发布

TA的新帖

QQ|Archiver|手机版|小黑屋|管理员之家 ( 苏ICP备2023053177号-2 )

GMT+8, 2025-1-15 23:24 , Processed in 0.265144 second(s), 22 queries .

Powered by Discuz! X3.5

Cpoyright © 2001-2025 Discuz! Team