作者：穿行来回间 | 来源：互联网 | 2023-09-01 18:15
常用指令
1) v:text : 更新元素的 textContent
2) v-html : 更新元素的 innerHTML
3) v-if : 如果为 true, 当前标签才会输出到页面
4）v-else: 如果为 false, 当前标签才会输出到页面
5) v-show : 通过控制 display 样式来控制显示/隐藏
6) v-for : 遍历数组/对象
7) v-on : 绑定事件监听, 一般简写为@
8) v-bind : 强制绑定解析表达式, 可以省略 v-bind
9) v-model : 双向数据绑定
10) ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象
11) v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }
内置指令实例
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
[v-cloak]{
display: none;
}
style>
head>
<body>
<div id="app">
<p ref=‘content‘ >内容内容p>
<button @click="btn"> 提示 button>
<p v-cloak>{{msg}}p>
div>
<script src="https://vuejs.org/js/vue.js">script>
<script type="text/Javascript">
var app = new Vue({
el:‘#app‘,
data:{
msg:‘一个小不点‘
},
methods:{
btn(){
alert(this.$refs.content.textContent)
}
}
})
script>
body>
html>
自定义指令
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="app1">
<p v-upper-text=‘msg1‘>p>
<p v-lower-text=‘msg1‘>p>
div>
<div id="app2">
<p v-upper-text=‘msg2‘>p>
div>
<script src="https://vuejs.org/js/vue.js">script>
<script type="text/Javascript">
//定义全局指令
// el: 指令所对应的标签对象
//binding：包含指令相关的数据对象
Vue.directive(‘upper-text‘,function (el,binding) {
el.textContent = binding.value.toUpperCase()
})
var app1 = new Vue({
el:‘#app1‘,
data:{
msg1:‘This is a apple‘
},
directives:{
‘lower-text‘(el,binding) {
return el.textContent = binding.value.toLowerCase()
}
}
})
var app2 = new Vue({
el:‘#app2‘,
data:{
msg2:‘Just Do It‘
}
})
script>
body>
html>
![Spark中使用map或flatMap将DataSet[A]转换为DataSet[B]时Schema变为Binary的问题及解决方案](https://img6.php1.cn/3cdc5/9b0d/243/f27d40b3b7e4b51b.png)
![[c++基础]STL](https://img.php1.cn/3c972/1edc8/c5a/a04ecc977fd8ed28.jpeg)
京公网安备 11010802041100号