vue 中v-if 的使用

条件判断
1.v-if
在元素和templa中使用v-if指令
1.1 如果条件为真，则显示当前的标签
但是其他的不满足条件的Dom则不会显示
1.2不满足条件的Dom也不会出现在浏览器的Dom树中；2.v-if  v-else-if   v-else  不一定要同时使用
但是前面没有v-if 不能使用 v-else-if 和v-else
如何判定前面，所谓的前面就是当前标签的哥哥元素，
如果写了，不影响后续代码的执行例题1.
<div id= "app"><p v-if="seen">现在你看到了</p><template v-if="ok"><h1>我也是被看到的</h1><p>我们都在data中被定以为true被看到</p></template>
</div>
<script src="vue.js文件"></script>
<script>
let vm = new Vue({//挂载Domel:"#app"，//数据data：{seen：true，ok：true}
})
</script>
例题2.
随机生成一个数字，判断是否大于0.5，然后输出对应信息：
<div id="app"><div v-if="Math.random()>0.5">soory //大于0.5显示的是我</div><div v-else>not sorry  //小于0.5显示的是我</div>
</div>
<script>let vm = new Vue({el："#app"
})
</script>2.v-else-if  可以链式的多次使用
例题2.判断type变量的值
<div id="app"><div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else-if="type === 'C'">C</div><div v-else>not A/B/C</div>
</div>
<script>let vm = new Vue({el："#app"，data：{type：'C'}
})
</script>3. v-show指令v-show  显示v-show = true  显示v-show = false 不显示v-show的核心是控制元素样式的display属性
<div id="app"><h1 v-show="ok">我是v-show</h1>
</div><script>
letvm = new Vue({el: '#app',data: {ok: true}
})
</script>例题2.<div id="app"><!-- point的数字大于80分才显示 --><div v-show="point >= 80"><!-- 虽然不满足条件v-show=true的条件，但是里面的数据仍然会渲染 -->{{point >= 80 ? "优秀" : "良好"}}</div><div v-show="point < 80" @click="change()">{{point >= 80 ? "优秀" : "良好"}}</div></div><script src="../vueJs文件/vue.js"></script><script>let vm = new Vue({el:'#app',data: {point: 60},methods:{change(){this.point = 80}}})</script>

vue 中v-if 的使用相关推荐

Vue中常用的8种v指令
Vue中常用的8种v指令根据官网的介绍,指令是带有 v- 前缀的特殊属性.通过指令来操作DOM元素指令功能 v-text="变量/表达式" 文本的设置字符串变量+数字可以 ...
vue v html安全,vue 中控制v-html 中的样式，但不影响全局的小技巧
我们知道在 Vue 中,style可以用两种方式来导入: // method1 @import ('./a.css'); //method2 复制代码但是不管哪一种,导进的css文件都是应用于全局的 ...
Vue中组件数据的传递
Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: < ...
vue和react相同点_我在React和Vue中创建了相同的应用程序。这是区别。
vue和react相同点 by Sunil Sandhu 由Sunil Sandhu 我在React和Vue中创建了相同的应用程序. 这是区别. (I created the same app in ...
Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
vue中使用checkbox
在vue中,通过v-model来判断当前checkbox是否被选中, 它绑定一个数组,选中项的值会自动添加到数组中. 如果我们要求选项至少选择一个值,我们来通过disabled来禁止用户取消点击选项 ...
「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
自己拍的小云彩源码在文末. 前言上篇文章写了个V利用Props进行组件之间的通信,这不立马就安排上这个案例拉丫.光学不敲等于没学哈(资深大佬除外哈) 目标就是实现如下的样子: 能够进行增删改查,并 ...
vue人员轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
jsx怎么往js里传参数_在vue中使用jsx语法的使用方法
什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到我为什么要在vue中用JSX? 想折腾一下呗,开玩笑.最开始是因 ...
vue 修改对象的值视图没有发生改变_在vue中处理对象属性改变视图不更新问题？ - echart...
...图等等,但是这些代码比较难写,因此我们通常会用借助echarts,那你知道如何使用echarts吗?这篇文章就和大家讲讲echarts的使用方法,有一定的参考价值,感兴趣的朋友可以看看.以饼状图 ...

vue 中v-if 的使用

vue 中v-if 的使用相关推荐

最新文章

热门文章