Vue.js数据事件和方法v-text,v-html,v-on:click,@click
<body><!--区别：v-text打印出来包含标签 v-html不包含标签--><div class="root" v-text="number"></div><div class="root1" v-html
<body>
<!--区别：v-text打印出来包含标签 v-html不包含标签-->
<div class="root" v-text="number"></div>
<div class="root1" v-html="number"></div>
<!--点击事件用v-on方法-->
<div id="root" v-on:click="tomyclick">{{number}}</div>
<!--点击事件用@方法-->
<div id="root1" @click="tomyclick">{{number}}</div>
<script>
new Vue({
el:".root",
data:{
number:"<h1>这是v-text方法</h1>"
},
})
new Vue({
el:".root1",
data:{
number:"<h1>这是v-html方法</h1>"
},
})
new Vue({
el:"#root",
data:{
number:"这是v-on:click方法"
},
methods:{
tomyclick : function(){
this.number = "点击之后的效果用v-on方法"
}
}
})
new Vue({
el:"#root1",
data:{
number:"这是v-on:click方法"
},
methods:{
tomyclick : function(){
this.number = "点击之后的效果用@方法"
}
}
})
</script>
</body>
截图：
效果：
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献2条内容
所有评论(0)