本文将对vue的指令进行讲解,但并没有讲完,根据作者学习进度进行更新。我们将学习到以下这些指令:(上一篇文章提到了一些可能对你有帮助的一些知识点。juejin.cn/post/731087... )
arduino
v-text
v-html
v-show
v-if
v-else
v-else-if
通过CDN使用vue
你可以借助 script 标签直接通过 CDN 来使用 Vue:
xml
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
v-text
在Vue.js中,v-text
是一种指令,用于更新元素的文本内容。它类似于插值表达式 {{ }}
,但有一些区别。与插值表达式 {{ }}
不同,v-text
不会解析 HTML。它将文本内容作为纯文本对待,不会将其中的HTML代码进行解释。这在某些情况下可能是有用的,因为它可以防止潜在的 XSS 攻击。
v-html
v-html
是Vue.js中的一个指令,用于将数据作为 HTML 解释并插入到元素中。这允许你动态地渲染包含 HTML 结构的文本内容。需要注意的是,使用 v-html
可能存在安全风险,因为它允许直接插入HTML。确保在使用用户输入的数据时进行适当的过滤和验证,以防止潜在的跨站脚本攻击(XSS)。
通过一个实例来了解一下
xml
<body>
<div id="app"></div>
<template id="my-app">
<h2>{{msg}}</h2>
<h2 v-text="msg"></h2>
<h1 v-html="article"></h1>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
template: '#my-app',
data(){
return {
msg: '指令的使用',
article: '<p>这是第一个段落</p><p>这是第二个段落</p>'
}
}
})
app.mount('#app')
</script>
</body>

v-show
在Vue.js中,v-show
是一种用于根据条件显示或隐藏元素的指令。与 v-if
不同,v-show
不是通过添加或删除元素来实现的,而是通过CSS的display
属性进行切换。
与 v-if
不同,v-show
在初始渲染时会始终保留元素,并使用 CSS 控制其显示或隐藏,这使得在频繁切换可见性的情况下,v-show
的性能可能更好。然而,如果元素的初始渲染时就需要隐藏,或者在显示和隐藏之间切换的次数较少,通常使用 v-if
会更合适。
v-if
在Vue.js中,v-if
是一种用于条件性地渲染元素的指令。通过 v-if
,你可以根据指定的表达式的真假情况来决定是否渲染或移除特定的元素。
需要注意的是,与 v-show
不同,v-if
在初始渲染时会决定是否渲染元素,而不是使用 CSS 控制其显示或隐藏。如果元素的显示与隐藏比较频繁或取决于异步操作的结果,v-show
可能更适合,因为它在切换时不会重复渲染整个元素。
v-else
在Vue.js中,v-else
是与 v-if
一起使用的指令,用于指定在 v-if
表达式为假时渲染的内容。它必须立即跟在一个带有 v-if
的元素或 v-else-if
元素之后。
需要注意的是,v-else
元素必须立即跟在带有 v-if
或 v-else-if
的元素之后,并且它们必须属于同一父元素。这是因为 Vue.js 会在编译时将它们关联在一起。
一个实例:(这里有两个效果,一个切换一个隐藏,可以到vscode中自行体验)
xml
<body>
<div id="app"></div>
<template id="my-app">
<!-- <h2 v-if="status === 1">{{time}}</h2>
<h2 v-if="status === 2">{{time2}}</h2>
<h2 v-if="status === 3">{{time3}}</h2> -->
<h2 @click="hide" v-show="show">{{time}}</h2>
<!-- v-if v-show 都是控制悬殊隐藏,但后者是css上面的隐藏,但前者是html上的隐藏 -->
<!-- <button @click="change">切换</button> -->
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
template: '#my-app',
data(){
return {
time: '2023-12-08',
time2: '2023年12月08日',
time3: '2023/12/08',
status: 1,
show: true
}
},
methods: {
change (){
if(this.status === 3){
this.status = 0
}
this.status++
},
hide(){
this.show = false
}
}
})
app.mount('#app')
</script>
</body>
v-show 是可以人为放开的

v-if则不能

都看到这了,你不点个赞,说点什么再走?
