<h5>1.绑定数据及事件:</h5>
<h2>
<span v-bind:title="msg">
title:{{name}}
</span>
<button v-on:click="resM">翻转</button>
</h2>
<pre>注意:v-on和v-bind的区别:v-on 指令添加一个事件监听器;v-bind 各类数据绑定指令</pre>
<script type="text/javascript">
//绑定数据及事件
const names = {
data(){
return{
name:'张三',
msg:"我是title的提示信息"
}
},
mounted(){
this.name = "李四的家";
},
methods:{
resM(){
this.name=this.name.split('').reverse().join('');
}
}
}
Vue.createApp(names).mount('#app h2'); //声明式渲染方式——挂载事件
</script>
交互效果见:https://course.51qux.com/vue3-0-1
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章
原始出处 、作者信息和本声明。否则将追究法律责任。
转载请注明来源:
初识Vue 3.0 —— v-bind/on: 绑定数据及事件 -
Qui-Note