VUE3.X常用指令
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE3.X常用指令相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<!-- v-text指令 -->
<p v-text="msg"></p>
<!-- v-html -->
<p v-html="info"></p>
</div>
Vue.createApp({
data(){
return{
msg:"hello"
info:'<h3>welcome</h3>'
}
}
}).mount("#app")
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/vue.js"></script>
<style type="text/css">
#myp{
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="app">
<!-- 绑定一个点击事件 -->
<button v-on:click="flag=!flag"> 变化 </button>
<hr>
<!-- v-show显示和隐藏（display的CSS属性） -->
<p id="myp" v-show="flag">我的段落</p>
<!-- v-if 实现元素的隐藏和显示（对dom元素的删除和创建） -->
<p id="myp" v-if="flag">我的段落</p>
<!-- v-if \\ v-else-if \\ v-else -->
<p v-if="age>60">老年</p>
<p v-else-if="age>=40">老年</p>
<p v-else-if="age>18">少年</p>
<p v-else>童年</p>
</div>
Vue.createApp({
data(){
return{
flag:true,
age:25
}
}
}).mount("#app")
</body>
</html>
以上是关于VUE3.X常用指令的主要内容，如果未能解决你的问题，请参考以下文章