Vue指令集介绍和使用
程序员文章站
2022-06-19 16:07:20
解释：指令是带有 v- 前缀的特殊属性。作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM上。...
解释：指令是带有 v- 前缀的特殊属性。
作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM上。
v-text
更新元素的 textContent
<body>
<div id="app">
<p v-text="message"></p>
</div>
<script src="js/vue.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "This is MyBlog"
}
})
</script>
</body>
看一下效果
v-htm
更新元素的 innerHTML
<body>
<div id="app">
<p v-html="message"></p>
</div>
<script src="js/vue.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "<a href='https://jiangrunkang.cn'>This is MyBlog</a>"
}
})
</script>
</body>
看一下效果
v-html解析html标签
v-text解析文本
v-on
为元素绑定事件
<body>
<div id="app">
<input type="button" value="v-on事件" v-on:click="doClick"/>
</div>
<script src="js/vue.min.js"></script>
<script>
var app = new Vue({
el: "#app",
methods: {
doClick: function () {
alert("Hello Word!");
}
}
})
</script>
</body>
效果
v-on事件简写
加@，和上面代码运行效果一样
<input type="button" value="v-on事件" @click="doClick"/>
v-show
作用
根据表达式（布尔型）的真假，切换元素显示状态。
原理
修改元素的display，实现显示与隐藏。
示例
<input v-show="true" type="text" value="你看到我了！" />
<input v-show="false" type="text" value="你看不到我！" />
但是这样绑定是死的，给设置一个方法动态绑定 v-show
<body>
<div id="app">
<input type="button" value="v-show切换" v-on:click="changeIsShow" />
<input v-show="isShow" type="text" value="你看到我了！" />
</div>
<script src="js/vue.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: true
},
methods: {
changeIsShow: function(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
效果
默认显示后面的输入框。
当我点击前面的 按钮 之后，后面的输入框消失。
v-if
作用
进行条件判断，操纵dom元素
<body>
<div id="app">
<input type="button" value="v-if判断" v-on:click="changeIsShow" />
<input v-if="isShow" type="text" value="你看到我了！" />
</div>
<script src="js/vue.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: true
},
methods: {
changeIsShow: function(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
v-if与v-show的区别
v-if与v-show 后面的表达式都是布尔型
v-show: dom节点一直存在，只是display的属性在进行改变
v-if: 根据表达式的真假切换元素的显示状态，本质是通过操纵dom元素来切换显示状态，表达式的值为true,元素存在于dom节点中；为false，从dom节点中移除
v-bind
作用
为元素绑定属性名
语法
//完整写法
v-bind:属性名
//简写，省略属性名
:属性名
示例
代码中涉及到的 v-model参考这里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.class1 {
background: lightblue;
color: #eee;
}
</style>
</head>
<body>
<div id="app">
<label for="input1">修改颜色</label>
<input type="checkbox" v-model="active" id="input1">
<br />
<div v-bind:class="{class1: active}">
This is content.
</div>
</div>
<script src="js/vue.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
active: false
}
})
</script>
</body>
</html>
效果
打开之后，默认是没有背景颜色的。
点击 修改颜色 ，文字添加背景颜色。
本文地址：https://blog.csdn.net/m0_49926319/article/details/110151175
上一篇： 小程序用户自动检测最新版本并更新
下一篇： 表单验证