vue之v-text、v-html及v-on标签基本使用
【摘要】 vue之v-text、v-html及v-on标签基本使用
本地应用
1. v-text：设置标签的文本值
<body>
<div id="app">
<h2>{{ message }} xdr630</h2>
<h2 v-text="message">xdr630</h2>
<h2 v-text="info">xdr630</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello,vue',
info: "你好,vue"
}
})
</script>
</body>
- 可以看出 v-text 不能显示出后面的内容，,
v-text会覆盖元素中原来的内容，但是 插值表达式（{{ }}）只会替换自己的这个占位符，不会把 整个元素 的内容给清空 - 同时v-text 表达式也支持字符串的拼接，如：
<h2>{{ message+'!!' }} xdr630</h2>
<h2 v-text="message+'!!'">xdr630</h2>
<h2 v-text="info+'!!'">xdr630</h2>
2. v-html：设置标签的innerHTML
案例：v-text和v-html输入内容比较
<body>
<div id="app">
<p v-html="content"></p>
<p v-text="content"></p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
// content: "你好",
content: "<a href='https://xdr630.blog.csdn.net/' target='_blank'>兮动人</a>",
}
})
</script>
</body>
3. v-on基础：为元素绑定事件
<body>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt">
<input type="button" value="v-on简写" @click="doIt">
<input type="button" value="双击事件" @dblclick="doIt">
<h2 @click="changeFood">{{ food }}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
food: "番茄炒鸡蛋"
},
methods: {
doIt: function () {
alert("做It");
},
changeFood: function () {
console.log(this.food)
this.food+="好好吃!";
}
}
})
</script>
</body>
- 点击food，就会增加一次
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）