一: 指令集
(1)v-once
(1)作用:
(1)使得标签内部的属性一旦被赋值便不可以被更改
(2)如果是 input 框 可以主动输入数据进行更改
(2)使用方式
- <div id="app">
- <!-- 其不加 v-once input 框内数据可以更改 -->
- <p><input type="text" v-model="num"></p>
- <!-- 其加了 v-once input 框内数据不能随着别的数据变动而变动 但是可以主动变动 -->
- <p><input type="text" v-model="num" v-once></p>
- <!-- 无论标签内部数据是否变动 其都不会变动 -->
- <p v-once>{{num}}</p>
- </div>
- </body>
- <script>
- let App = new vue({
- el: '#app',
- data: {
- num: 0
- },
- })
- </script>
v-once 使用方式
(2)v-cloak
(1)作用: 防止页面闪烁
- <style>
- [v-cloak] {
- display: none;
- }
- </style>
- <!-- 不处理的情况下, 每次新价值该页面, 都会先渲染 {{}}, 当 vue 环境加载成功,{{}} 有会被解析消失 -->
- <!-- 处理后, vue 环境没加载好时,#app 是被隐藏的, vue 环境加载成功, 会依次 #app 的 v-cloak 属性, 就不会出现 {{}} 渲染闪烁问题 -->
- <div id="app" v-cloak>
- {{ }}
- {{ }}
- {{ }}
- </div>
- <script src="js/vue.js"></script>
- <script>
- new Vue({
- el: '#app',
- })
- </script>
v-cloak 使用方式
(3)v-if 与 v-show
(1)作用:
(1)可以控制标签的显隐
(2)绑定的都是布尔值
(3)v-if 不会渲染标签
(5)v-show 会以 {display:none} 的形式隐藏标签
- <div id="app">
- <!-- 其下方布尔值对应为 false 不会再页面渲染出来 且检测内部 html 标签也不会被渲染 -->
- <p v-if="is_show">if 标签渲染</p>
- <!-- 其下方布尔值对应为 false 不会再页面渲染出来 检测内部 html 标签会以 display:none 的形式渲染 -->
- <p v-show="is_show">show 标签渲染</p>
- </div>
- </body>
- <script>
- let App = new Vue({
- el: '#app',
- data: {
- is_show: false
- }
- })
- </script>
v-if 与 v-show 对比展示
(4)v-if 条件判断
(1)作用:
(1)类似于条件语句进行逻辑判断
(2)使用方式:
- v-if = '布尔值'
- v-else-if = '布尔值'
- v-else
PS:v-else 没有条件 上述条件都不成立 走 else 条件
- <div id="app">
- <!-- 情况一 v-if 布尔值为真 只有其才会进行页面渲染 -->
- <p v-if="0">if 条件语句运行</p>
- <!-- 情况二 v-else-if 布尔值为真 其余都为假 只有其才会进行页面渲染 -->
- <p v-else-if="0">else-if 条件语句运行</p>
- <!-- 情况三 上述 if 条件都为假 else 会进行渲染 且只要 if 条件对应的布尔值为假 无论 else 对应的布尔值如何 都会进行渲染 -->
- <p v-else>else 条件语句运行</p>
- </div>
- </body>
- <script>
- let App = new Vue({
- el: '#app',
- })
- </script>
v-if 基本使用方式
- <style>
- .box {
- width: 400px;
- height: 300px;
- }
- .r {
- background-color: red;
- }
- .y {
- background-color: yellow
- }
- .b {
- background-color: blue;
- }
- </style>
- </head>
- <body>
- <div id="app">
- <div class="em">
- <p>
- <!-- 点击事件 此时点击红 页面显示红色框 以此类推 -->
- <button @click="chang_box('rbox')">红</button>
- <button @click="chang_box('ybox')">黄</button>
- <button @click="chang_box('bbox')">蓝</button>
- </p>
- <!-- 页面渲染三个框 根据 showname 对应的值不同进行不同的页面渲染 -->
- <div class="box r" v-if="showname=='rbox'"></div>
- <div class="box y" v-else-if="showname=='ybox'"></div>
- <div class="box b" v-else="showname=='bbox'"></div>
- </div>
- </div>
- </body>
- <script>
- let App = new Vue({
- el: '#app',
- data: {
- // 默认渲染红色
- showname: 'rbox'
- },
- methods: {
- // 上述点击事件会进行传参 当传参的参数赋值给函数 函数将传值赋值给 showname
- chang_box(name) {
- this.showname = name
- }
- }
- })
- </script>
边框渲染 LowB 版本
来源: http://www.bubuko.com/infodetail-3232635.html