【vue学习】2.本地应用——内容绑定，事件绑定
本地应用——内容绑定，事件绑定
v-test
作用: 设置标签的文本值
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<h2 id="app-2" v-text="message">
</h2>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: '我是v-text'
}
})
</script>
</body>注意: 会替换全部内容，使用插值表达式{{}}可以替换指定内容。
v-html
作用： 设置元素的innerHTML
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<p v-html="message"></p>
<p v-text="message"></p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: "<a href='https://www.baidu.com'>百度官网</a>"
}
})
</script>
</body>
v-on
作用： 为元素绑定事件
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<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="v-on双击" @dblclick="doIt" />
<h2 @click="changeFood">{{food}}</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
food:"黄瓜"
},
methods:{
doIt:function(){
alert("做it");
},
changeFood:function(){
this.food+="好好吃";
}
}
})
</script>
</body>注意：
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义再methods里面
- 方法内部通过this关键字访问定义再data中的数据
运用-计数器
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id ="app">
<button @click="sub">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
num:0
},
methods:{
add:function(){
if(this.num<10){
this.num +=1;
}
else{
alert("已经到10了，不可以加了");
}
},
sub:function(){
if(this.num>=1){
this.num -=1;
}
else{
alert("已经到0了，不可以减了");
}
}
}
})
</script>
</body>展示结果
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/09/17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
