谷粒学院项目实战45——单向数据绑定与双向数据绑定
数据绑定指令
(1)单向数据绑定
使用v-bind可以单向绑定值，将其用于标签属性中。下面代码的效果是，鼠标放置在在浏览器显示的“我是标题”上，将会显示"页面加载时间:xxxx".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 使用v-bind单向绑定值，将其用于标签属性中 -->
<h1 v-bind:title="message">
<!-- 使用插值表达式获取值，将其显示在内容中 -->
{{content}}
</h1>
<!-- 简写 -->
<h2 :title="message">
<!-- 使用插值表达式获取值，将其显示在内容中 -->
{{content}}
</h2>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
content:"我是标题",
message:"页面加载时间:" + new Date().toLocaleString
}
})
</script>
</body>
</html>
(2)双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- value是文本框中的默认值，单向绑定，只是读到searchMap的值 -->
<input type="text" v-bind:value="searchMap">
<!-- 双向绑定，读，写，值发生改变则其他绑定了searchMap的值也发生改变 -->
<input type="text" v-model="searchMap">
<p>{{searchMap}}</p>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
searchMap:"520"
}
})
</script>
</body>
</html>
java全栈日日学 文章被收录于专栏
java全栈每日必学，不要高估自己一年能做的事，不要低估自己十年能做的事
地平线公司福利 412人发布