<!DOCTYPE html>
<html>
<body>
<div id="app">
<div v-model="message">原始字符串: {
{
message }}</div>
<div >计算后的反转字符串: {
{
}}</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello, Vue.js无难事！'
},
}
},
}).mount('#app')
</script>
</body>
</html>
还错
<!DOCTYPE html>
<html>
<body>
<div id="app">
<div v-model="message">原始字符串: {
{
message }}</div>
<div >计算后的反转字符串: {
{
refMessage }}</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello, Vue.js无难事！',
refMessage: ''
}
},
computed: {
refMessage {
this.message.split().reserve().join()
}
}
}).mount('#app')
</script>
</body>
</html>
改
<!DOCTYPE html>
<html>
<body>
<div id="app">
<div >原始字符串: {
{
message }}</div>
<div >计算后的反转字符串: {
{
reverseMessage }}</div>
<div >计算后的反转字符串: {
{
reverseMessage2 }}</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello, Vue.js无难事！",
reverseMessage: ''
}
},
computed: {
reverseMessage() {
this.message.split('').reverse().join('')
}
}
}).mount('#app')
</script>
</body>
</html>
不对
<!DOCTYPE html>
<html>
<body>
<div id="app">
<div >原始字符串: {
{
message }}</div>
<div >计算后的反转字符串: {
{
reverseMessage }}</div>
<div >计算后的反转字符串: {
{
reverseMessage2() }}</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello, Vue.js无难事！",
reverseMessage: ''
}
},
computed: {
reverseMessage() {
alert('计算属性') ;
return this.message.split('').reverse().join('')
},
methods: {
reverseMessage2() {
return this.message.split('').reverse().join('')
}
}
}
}).mount('#app')
</script>
</body>
</html>
最后两行有什么用？
<!DOCTYPE html>
<html>
<body>
<div id="app">
<div >原始字符串: {
{
message }}</div>
<div >计算后的反转字符串: {
{
reverseMessage }}</div>
<div >方法调用后的反转字符串: {
{
reverseMessage2() }}</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
message: "Hello, Vue.js无难事！"
}
},
computed: {
reverseMessage() {
alert('计算属性') ;
return this.message.split('').reverse().join('')
}
},
methods: {
reverseMessage2() {
alert("方法");
return this.message.split('').reverse().join('')
}
}
}).mount('#app');
let msg = vm.reverseMessage;
msg = vm.reverseMessage2;
</script>
</body>
</html>
去掉了alert
<!DOCTYPE html>
<html>
<body>
<div id="app">
<div >原始字符串: {
{
message }}</div>
<div >计算后的反转字符串: {
{
reverseMessage }}</div>
<div >方法调用后的反转字符串: {
{
reverseMessage2() }}</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
message: "Hello, Vue.js无难事！"
}
},
computed: {
reverseMessage() {
return this.message.split('').reverse().join('')
}
},
methods: {
reverseMessage2() {
return this.message.split('').reverse().join('')
}
}
}).mount('#app');
let msg = vm.reverseMessage;
msg = vm.reverseMessage2;
</script>
</body>
</html>
下面的这两行有什么用？
好像是没什么用
<!DOCTYPE html>
<html>
<body>
<div id="app">
<div >原始字符串: {
{
message }}</div>
<div >计算后的反转字符串: {
{
reverseMessage }}</div>
<div >方法调用后的反转字符串: {
{
reverseMessage2() }}</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
message: "Hello, Vue.js无难事！"
}
},
computed: {
reverseMessage() {
return this.message.split('').reverse().join('')
}
},
methods: {
reverseMessage2() {
return this.message.split('').reverse().join('')
}
}
}).mount('#app');
//let msg = vm.reverseMessage;
//msg = vm.reverseMessage2;
</script>
</body>
</html>
这个例子里，computed和methods是一样的功能啊？