前言
1、v-text指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello Vue</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<h2 v-text="str">啦啦啦啦</h2>
<h2 v-text="str+'嘿嘿嘿！'">啦啦啦啦666</h2>
<h2>{
{str}}</h2>
</div>
<script>
var test = new Vue({
el:'#app',
data:{
str:"皮皮虾，喝啤酒"
}
})
</script>
</body>
</html>
总结
- v-text指令的作用是：设置标签的内容（textContent）
- 默认写法会替换全部内容，使用插值表达式可以替换指定内容
- 内容支持写表达式
2、v-html指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello Vue</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<p v-html="message"></p>
<p v-text="message"></p>
</div>
<script>
var test = new Vue({
el:'#app',
data:{
message:"<a href='https://www.baidu.com'>百度</a>"
}
})
</script>
</body>
</html>
点击百度后即可跳转到百度首页
总结
- v-html指令的作用是：设置元素的innerHTML
- 内容中有html结构会被解析成标签
- v-text指令只会解析成文本
3、v-on指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello Vue</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt">
<input type="button" value="@指令" @click="doIt">
</div>
<script>
var test = new Vue({
el:'#app',
methods:{
doIt:function () {
alert("皮皮虾，我们走！")
}
}
})
</script>
</body>
</html>
4、实现计数器
实现步骤
- 创建Vue示例时：el(挂载点)，data数据，methods(方法)
- v-on指令的作用是绑定事件，简写为@
- 方法中通过this关键字获取data中的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello Vue</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<!--计数器-->
<div class="input-num">
<button @click="delNum">
-
</button>
<span>{
{num}}</span>
<button @click="addNum">
+
</button>
</div>
</div>
<script>
var test = new Vue({
el:'#app',
data:{
num:0
},
methods:{
delNum:function () {
if (this.num > 0){
this.num--;
}else {
alert("别点了，最低为0")
}
},
addNum:function () {
if (this.num < 10){
this.num++;
}else {
alert("别点了，最高为10")
}
}
}
})
</script>
</body>
</html>
实验结果
博主会持续更新，有兴趣的小伙伴可以点赞、关注和收藏下哦，你们的支持就是我创作最大的动力！
博主开源Python爬虫教程目录索引（宝藏教程，你值得拥有！）