找回密码
 注册
首页 › ≡≡网络技术≡≡ › WEB前端 ›v-bind:标签和{{}}使用的区别
返回列表 发新帖

js 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>
复制代码


回复

使用道具 举报

B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册
学习中心
站长自定义文字内容，利用碎片时间，随时随地获取优质内容。
Q设计语言 了解更多
Q Design 提供商家设计所需的指导与资源，帮商家快速完成产品设计、降低生产成本。
学习中心
站长自定义文字内容，利用碎片时间，随时随地获取优质内容。
Q设计语言 了解更多
Q Design 提供商家设计所需的指导与资源，帮商家快速完成产品设计、降低生产成本。
关注管理员之家(admin365.cn)，利用碎片时间，随时随地获取优质内容！
关于我们联系我们商务合作寻求报道投稿须知
意见反馈：lxtdj@163.com
稿件投诉：lxtdj@163.com
7×24小时：18805246622
商务合作：18805246622
内容合作QQ：82931570
客服QQ：82931570

关注我们

关注泗洪热线官方微博
微博账号lxtdj@163.com

关注泗洪热线微信公众号
关注泗洪热线，关注泗洪生活
商务合作、媒体邀约
QQ: 82931570
Copyright © 2021 大湖网络 Powered by 管理员之家 - 苏ICP备2023053177号-2
微信扫一扫