- 技术博客
- 电商系统前后端开发（Vue+SSM）(5) - vue实例属性
1 Vue 虚拟 DOM 和 diff 算法
2 分支语句
3 Vue 对象之间的操作
3.1 操作属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 测试案例
</title>
</head>
<body>
<div id="app1">
{{title}}
<button type="button" @click="toUpCase">点击1
</button>
</div>
<div id="app2">
<button type="button" @click="changeOtherVueTitle">点击2
</button>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script>
var v1 = new Vue({
el: '#app1',
data: {
title: "Hello Vue"
},
methods: {
toUpCase() {
this.title = this.title.toUpperCase()
}
},
computed: {
toLowerCase() {
return this.title.toLowerCase()
}
},
watch: {
title: function (n, o) {
console.log(n + ":" + o)
}
}
})
var v2=new Vue({
el: '#app2',
methods: {
changeOtherVueTitle(){
v1.title = "你好！！！"
}
}
})
</script>
</html>
3.2 操作方法
4 Vue 的实例属性
4.1 实例属性 ref 的用法
相当于是 id
4.2 动态绑定 vue 实例到页面中
