VUE3的数据绑定,计算属性,监听
目录
VUE3的数据绑定，计算属性，监听
使用v-model和计算属性、监听属性指令，完成以下内容，具体效果参考截图：
- 创建一个输入框，接受用户输入的内容。
- 编写合适的计算属性，实现用户输入内容的翻转。
创建一个按钮，点击按钮时处罚函数，提醒用户点击次数和翻转之后的用户输入内容。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<title>Vue 示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
</head>
<body>
<div id="app">
请输入一个字符串:<input type="text"v-model="chat">
<div>
<button v-on:click="great">Add 1</button>
<p>按钮已经点击了{{counter}}次.</p>
</div>
</div>
</div>
<script>
const vm=Vue.createApp({
data(){
return{
counter:0,
name:'杜彤',
chat:''
};
},
methods:{
great:function(event){
this.counter++;
const reversedChat=this.chat.split('').reverse().join('');
alert('Hello'+this.name+'!'+reversedChat);
},
}
}).mount('#app');
</script>
</body>
</html>
