本文通过三个实例深入解析Vue.js中反应数据绑定的概念与应用，包括基本的数据绑定、条件渲染以及计算属性的实现方式，展示了Vue如何简化数据与DOM的同步过程，提升开发效率。
6，Vue的第六个实例：反应数据绑定
<！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>反应数据绑定</ TITLE>
<script src =“https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js”> </ script>
</ HEAD>
<BODY>
<！ - Vue.js的核心是一个反应式数据绑定系统，它使得保持数据和DOM同步非常简单 - >
<！ - 我们运用某些vue语法将DOM“绑定”到底层数据。一旦创建了绑定，DOM就会与数据保持同步。无论何时修改数据，DOM都会相应地更新 - >
<div id =“example-1”>
Hello{{name}}！
</ DIV>
<SCRIPT>
var exampleData = {
name：'Vue.js'//与数据绑定，直接对数据的操作，DOM同步更新
//怎么感受到变化？打开浏览器开发者控制台并进行修改exampleData.name。您应该看到上面呈现的示例相应地更新
}
var exampleVM = new Vue（{
el：'＃example-1'，
data：exampleData
}）
</ SCRIPT>
</ BODY>
</ HTML>
结果：
7，Vue的第七个实例：反应数据绑定
<！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>反应数据绑定2 </ TITLE>
<script src =“https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js”> </ script>
</ HEAD>
<BODY>
<div id =“example-2”>
<！ - v-if指令v-表示它们是Vue.js提供的特殊属性
它们会对呈现的DOM应用特殊的反应行为。
所以我们不仅可以将DOM文本绑定到数据，还可以将DOM的结构绑定到数据
还有很多其他指令，每个指令都有自己的特殊功能
- >
<p v-if =“greeting”>你好！</ p>
</ DIV>
<SCRIPT>
var exampleVM2 = new Vue（{
el：'＃example-2'，
data：{
greeting：true
}
}）
</ SCRIPT>
</ BODY>
</ HTML>
结果：
8，Vue的第八个实例：计算属性
<!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>计算属性</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<!-- 模板用于描述视图的结构，不要加入太多的逻辑，
这可能使它们变得臃肿和难以维护，这就是Vue.js仅将绑定表达式限制为一个表达式的原因。
对于需要多个表达式的任何逻辑，您应该使用计算属性。 -->
<body>
<div id="example">
a={{a}}, b={{b}}
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
a: 1
},
// 计算
computed: {
b: function() {
// this指向vm实例
return this.a + 1
}
}
})
</script>
</body>
</html>
结果：
扫一扫
1682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
