文章目录
vue常用指令
v-once
只会执行一次渲染，当数据发生改变时，不会再变化
<div id="app"> {{message}} <h2 v-once>{{message}}</h2> </div> <script src="../JS/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' } }) </script>
v-html
v-html 渲染字符串，覆盖原有的字符串
<div id="app"> {{message}} <h2 v-html="url"></h2> </div> <script src="../JS/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', url: '<a href="https://blog.csdn.net/xiaohua616">点一下</a>' } }) </script>
v-text
v-text 是渲染html，Mustache 语法（{{}}双大括号）和v-text都是输出文本
<div id="app"> {{message}} <h2 v-text="message"></h2> </div> <script src="../JS/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' } }) </script>
v-bind
v-bind 动态绑定数据
<div id="app"> <!-- v-bind: 简写:--> <a :href="ImagUrl">点一下</a> </div> <script src="../JS/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', ImagUrl: 'https://blog.csdn.net/xiaohua616' } }) </script>
v-if
v-if 当条件false时,包含v-if指令元素,不会存在dom中
<div id="app"> <h2 v-if="isShow">{{message}}</h2> </div> <script src="../JS/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', isShow: true } }) </script>
v-if和v-else
v-if和v-else 接收一个条件或布尔值
<div id="app"> <h2 v-if="isShow">{{message}}</h2> <h1 v-else>isShow为false显示我</h1> </div> <script src="../JS/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', isShow: false } }) </script>
v-show
v-show 使用display属性来控制显示隐藏
<div id="app"> <!-- v-if：当条件false时,包含v-if指令元素,不会存在dom中 --> <h2 v-if="isShow" id="aaa">{{message}}</h2> <!-- v-show: 条件false时,包含v-show指令元素,改变css样式--> <h2 v-show="isShow" id="bbb">{{message}}</h2> </div> <script src="../JS/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', isShow: true } }) </script>
v-for
v-for 用来遍历数组、对象、字符串
<div id="app"> <!-- 在遍历对象过程中,如果只是获取一个值,只获取的是value --> <ul> <li v-for="item in info">{{item}}</li> </ul> <!-- 在遍历对象过程中,如果只是获取一个值,只获取的是key和value --> <ul> <li v-for="(value,key) in info">{{value}}-{{key}}</li> </ul> <!-- 在遍历对象过程中,如果只是获取一个值,只获取的是key和value和下标 --> <ul> <li v-for="(index,value,key) in info">{{index}}-{{value}}-{{key}}</li> </ul> </div> <script src="../JS/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { info: { name: 'xh', age: 19, height: 1.88 } } }) </script>
v-model
v-model 数据双向绑定，在input中使用案例
<div id="app"> <input type="text" v-model="message"> <h2>{{message}}</h2> </div> <script src="../JS/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' } }) </script>
