<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性绑定和双向数据绑定</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
new Vue({
el: "#root"
})
</script>
</body>
</html>
只是引入了Vuejs的库，然后创建了一个div标签作为一个挂载点，然后让Vue实例挂载到我们的这个挂载点之下。接下来写模板的内容。title是一个HTML的一个属性。希望这个提示语title可变，不是写死的。我们可以在实例的data里面去定义一个title，让它等于this is hello world。这个时候title里显示的内容是数据里的title就可以了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性绑定和双向数据绑定</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div title="this is hello world">hello world</div>
</div>
<script type="text/javascript">
new Vue({
el: "#root"
})
</script>
</body>
</html>
这样写可以吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性绑定和双向数据绑定</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div title="title">hello world</div>
</div>
<script type="text/javascript">
new Vue({
el: "#root",
data:{
title:"this is hello world"
}
})
</script>
</body>
</html>
现在只是显示字符串的title，并不是下面data里面数据项里的title。如果在Vue之中我们希望做属性的绑定，这个title属性绑定的是数据里面的title，那怎么做好属性的绑定呢？那就需要在前面使用一个新的模板指令：
v-bind:
它的意思是
原文地址：https://www.cnblogs.com/ZHONGZHENHUA/p/9177133.html
时间： 2024-10-09 23:22:49