灰儿 发表于 2022-7-27 06:42:23

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>

页: [1]
查看完整版本: v-bind:标签和{{}}使用的区别