当前位置：尊龙游戏旗舰厅官网 > 前端技术 > vue >内容正文

vue

vue v-尊龙游戏旗舰厅官网

发布时间：2025/1/21 vue 15 豆豆

尊龙游戏旗舰厅官网收集整理的这篇文章主要介绍了小编觉得挺不错的,现在分享给大家,帮大家做个参考.

指令

指令的英文：directive，vue指令的作用是通过带有v-的特殊属性，实现对dom的响应式加载

v-if

v-if的作用是通过一个布尔表达式进行对dom的上树和下树的渲染
基本使用：

<p v-if="false">我是第一行dom元素p> <p v-if="true">我是第二行dom元素p>

我们工作中不是使用布尔值直接进行渲染，而是通过data带有布尔值的进行渲染

<body><div id="app"><p v-if="boo">我是第一行dom元素p><p v-if="!boo">我是第二行dom元素p>div><script src="js/vue.js">script><script>var vue = new vue({el: '#app',data:{boo: false}})script> body>

第二种情况是通过使用表达式进行逻辑判断

<body> <div id="app">//当boo的值等于100的时候再显示<p v-if="boo == 100">我是第一行dom元素p><button @click="add">按我加1button>div><script src="js/vue.js">script><script>var vue = new vue({el: '#app',data:{boo: 95},methods:{add(){this.boo}}})script> body>

v-if的显示根本原理一个是通过对值的隐式转换，一个就是通过对表达式的判断得出的布尔值得来的
我们将案例进行深入演变

<body><div id="app"><h2>{{boo}}h2><p v-if='boo >= 0 && boo <= 5'>我是5p><p v-if='boo >= 6 && boo <= 10'>我是10p><p v-if='boo >= 11 && boo <= 15'>我是15p><p v-if='boo >= 16 && boo <= 20'>我是20p><p v-if="boo > 20">我是大于20p><button @click="add">按我加1button>div><script src="js/vue.js">script><script>var vue = new vue({el: '#app',data:{boo: 0},methods:{add(){this.boo}}})script> body>

上面的代码是通过v-if一层一层进行判断的，实际上是可以通过v-else-if和v-else进行分支判断

需要注意的是v-else的使用前提是必须先有v-if并且中间不允许有任何的元素间隔

上面的代码写法是错误的，因为div不能在v-if和v-else之间进行拆分
正确的写法：

<p v-if='boo >= 0 && boo <= 5'>我是5p> <p v-else="boo > 20">我是大于20p> 与50位技术专家面对面20年技术见证，附赠技术全景图

总结

以上是尊龙游戏旗舰厅官网为你收集整理的的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。

vue
指令