初识Vue 3.0 —— v-bind/on: 绑定数据及事件
七娃博客34 次
<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
评论 | 0 条评论