【vue常用的指令】

最新推荐文章于 2023-11-03 16:30:00 发布

李木木~

最新推荐文章于 2023-11-03 16:30:00 发布

阅读量82

点赞数

分类专栏： Vue2 文章标签： vue.js angular.js javascript

本文链接：https://blog.csdn.net/Lnbd_/article/details/122966374

版权

Vue2 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

一、vue常用指令：

v-model 多用于表单元素实现双向数据绑定
v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或json
v-show 显示内容 ,通过display=block/none来控制元素隐藏出现
v-hide 隐藏内容同上
v-if 显示与隐藏（dom元素的删除添加同angular中的ng-if 默认值为false）
v-else-if 必须和v-if连用
v-else 必须和v-if连用不能单独使用否则报错模板编译错误
v-bind 动态绑定作用：及时对页面的数据进行更改
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数函数必须写在methods里面
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三元型 ‘isred?“red”:“blue”’ 3、数组型 ‘[{red:“isred”},{blue:“isblue”}]’
v-once 进入页面时只渲染一次不在进行渲染
v-cloak 防止闪烁该属性需配合样式使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 以CDN方式引入 Vue.js -->
    <script src="../新建文件夹/vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div>{{message}}</div>
        <div>{{message}}</div>
        <div>{{message}}</div>
        <div>{{message}}</div>
    </div>
</body>
</html>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'hello word'
        }
    })
</script>