vue_o6_v-once、v-html、v-text、v-pre、v-cloak指令的使用
一、v-once指令的使用
1、程式碼部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- v-once指令:展示第一次的資料,之後值就不會改變了 -->
<div id='app'>
<!-- 變數值會隨著宣告的改變而改變 -->
<h2>{{message}}</h2>
<!-- 變數值不會隨著宣告的改變而改變 -->
<h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'hello'
}
})
</script>
</body>
</html>
2、效果展示圖
3、程式碼截圖
二、v-html指令的使用
1、程式碼部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id='app'>
<h2>{{url}}</h2>
<!-- 就會顯示出超連結形式 -->
<h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'hello',
url:'<a href="httP://www.baidu.com">百度一下</a>'
}
})
</script>
</body>
</html>
2、效果圖
3、程式碼截圖
三、v-text指令的使用
1、程式碼部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id='app'>
<h2>{{message}},張三</h2>
<!-- 後面的,張三會被覆蓋掉 -->
<h2 v-text="message">,張三</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'hello'
}
})
</script>
</body>
</html>
2、效果圖展示
3、程式碼截圖
四、v-pre指令的使用
1、程式碼部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id='app'>
<h2>{{message}}</h2>
<!-- v-pre:不解析資料,直接原封不動的顯示出來 -->
<h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'hello'
}
})
</script>
</body>
</html>
2、效果圖展示
3、程式碼截圖
五、v-cloak指令的使用
1、程式碼部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 如果有v-cloak的時候,頁面就看不見東西,空白的。
就不會像下面會先渲染出{{message}}這麼個東西。然後等待一秒後就會顯示出解析的hello
原理:就是vue解析之前有v-cloak這麼個屬性指令,那麼符合下面的style樣式,那麼就會不顯示出{{message}}
在vue解析之後,會自動刪掉v-cloak這個屬性指令,那麼style樣式就沒用了,那麼就會自動正常解析出hello資料
-->
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!-- 在vue解析之前,div中有一個屬性v-cloak ;在vue解析之後,就會相當於把v-cloak刪掉了,就沒有v-cloak這個屬性了 -->
<div id='app' v-cloak>
<h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
// setTimeout:延遲執行。頁面會先渲染出{{message}},等待一秒後才會解析出hello,體驗效果不好,所以要用v-cloak
setTimeout(function(){
const app=new Vue({
el:'#app',
data:{
message:'hello'
}
})
},1000)
</script>
</body>
</html>
2、效果展示圖
由於有個setTimeOut定時方法:所有使用v-cloak指令和不使用會展示出兩種不同的效果
(1)沒有使用v-cloak指令的時候
(2)使用v-cloak指令的時候
3、程式碼截圖
相關文章
- vue v-text,v-html,v-once,v-pre,v-cloak的使用VueHTML
- (精華2020年5月4日更新) vue教程篇 v-text,v-html,v-once,v-pre,v-cloak的使用VueHTML
- v-html 、v-text({{}}) 、v-model的區別HTML
- vue中的v-html,v-text,{{}}三種渲染模板VueHTML
- vue.js輸出HTML(v-pre | v-html)Vue.jsHTML
- Vue指令——v-htmlVueHTML
- [vue] 常見用法之 v-html、v-text、v-model區別VueHTML
- vue基礎——指令閃動v-cloakVue
- 使用DOMParser或仿寫v-html自定義指令實現html標籤字串的解析渲染HTML字串
- 【vue】v-htmlVueHTML
- VUE 之 v-html 後樣式不生效的問題VueHTML
- 探究-ping指令的使用
- gdb的指令碼使用 -- gdbinit指令碼
- v-html 及vue-append外掛HTMLVueAPP
- nginx的gzip指令介紹,Nginx的gzip指令使用小結Nginx
- Vue學習04-----v-bloak和v-htmlVueHTML
- Vue(6)v-on指令的使用Vue
- wrk(2)- Lua 指令碼的使用指令碼
- 使用rman備份的指令碼指令碼
- 使用dbstart指令碼的設定指令碼
- 前端【VUE】02-vue指令【v-html 、v-show、 v-if 、v-else、v-on、v-bind、v-for、v-model】前端VueHTML
- .net 預處理指令符的使用
- groovy之動態指令碼的使用指令碼
- 使用shell指令碼生成只讀許可權的sql指令碼指令碼SQL
- Redis使用Lua指令碼Redis指令碼
- 使用指令上傳gitGit
- sed指令使用詳解
- .net中 使用指令碼指令碼
- mystat指令碼以及使用指令碼
- redis中lua指令碼的簡單使用Redis指令碼
- Iiscnfg.vbs IIS 配置指令碼的使用指令碼
- JAVA與groovy指令碼的結合使用Java指令碼
- MySQL使用XtraBackup的shell指令碼介紹MySql指令碼
- Linux硬碟的使用狀況指令碼Linux硬碟指令碼
- 監控mysql索引使用效率的指令碼MySql索引指令碼
- nmap指令碼使用總結指令碼
- Linux——指令使用方法!Linux
- 使用go指令碼代替makefileGo指令碼