手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

Vue 插值语法与指令系统

2023-02-14 21:06:44 来源：博客园

Vue 插值语法与指令系统
- 一、Vue的MVVM演示
- 二、插值语法
- 三、文本指令
- 四、属性指令
- 五、事件指令
- 六、点击案例
- 七、class和style
- 八、条件渲染
- 九、列表渲染

Vue 插值语法与指令系统

一、Vue的MVVM演示

首先MVVM是model层和view层之间的数据交互层，在这里监听数据变化，从此不需要做BOM和DOM操作，数据会实时展示的。这样解决来了前端数据交互的繁杂的痛点。

代码

(资料图)

        Title    <script src="js/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>    姓名：{{name}}    
    年龄：{{age}}
<script>    var vm = new Vue({        el: "#app",        data: {            name: "almira",            age: 18        }    })</script>

图解展示

二、插值语法

插值不能写在标签的属性上，插值语法中可以放：

变量取值
对象取值
数组取值
简单的js语法
函数()

代码

        Title    <script src="js/vue.js"></script>    名字:{{name}}
    年龄:{{age}}
    爱好:{{hobby}}--->第一个爱好:{{hobby[0]}}
    闺蜜:{{bestie}}--->闺蜜的姓名:{{bestie.name}}and闺蜜年龄:{{bestie.age}}
    运算:{{10*2+3*4}}
    三目运算:{{10>90?"大于":"小于"}}
    标签:{{a_url}}
<script>    var vm = new Vue({        el: "#app",        data: {            name: "阿丽米热",            age: 19,            hobby: ["篮球", "足球", "排球"],            bestie: {name: "小努", age: 19},            a_url: "点我跳转到百度"        }    })</script>

图解展示

所谓的系统指令是Vue提供的都是V-开头如V-XX。关于系统指令，咱一共学了三个，分别是文本指令、属性指令、事件指令，指令写在标签上，当然是人以标签哦，在插值语法中能写的文本指令都能写，不要再加{{}}即可

三、文本指令

url必须在data中定义变量
v-text直接把字符串内容渲染到标签内部
v-html直接把字符串的内容渲染成标签，写在标签内部
v-show等于布尔值该标签是否显示样式控制显不显示
v-if等于布尔值该标签是否显示整个标签之间删除，效率低

代码

        Title    <script src="js/vue.js"></script>    v-text
    
    v-html
    
    v-show
        v-if
    
<script>    var vm = new Vue({        el: "#app",        data: {            a_url: "点我跳转到百度",            show: true,            show_if: this        }    })</script>

图解

展示

四、属性指令

标签上的属性可以绑定变量名，以后变量变化属性也跟着变化
完整语法：v-bind:属性名="变量名"
简写语法 :属性名="变量名"

代码

        Title    <script src="js/vue.js"></script>    快点我    
    
<script>    var vm = new Vue({        el: "#app",        data: {            url: "http://www.cnblogs.com",            photo: "https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg",            h: "200px",            w: "200px"        }    })</script>

图解展示

五、事件指令

事件指令包括点击、双击、滑动事件等等，用的最多的是点击事件
完整语法：v-on:事件名="函数"
简写语法：@事件名="函数"

代码

        Title    <script src="js/vue.js"></script>                    
<script>    var vm = new Vue({        el: "#app",        data: {            show: false        },        methods:{            "handleClick":function (){                console.log(this)                this.show=!this.show            }        }    })</script>

展示

六、点击案例

这个小案例：点击按钮，就随机切换美女图片，这个案例涉及到函数套函数，需要用箭头函数，但是目前还没学到，所以我们可以函数外部定义一下var_this = this

代码

        Title    <script src="js/vue.js"></script>                    
<script>    var vm = new Vue({        el: "#app",        data: {            url: "https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg",            url_list: [                "https://img.lesmao.vip/k/1178/T/XIAOYU/951/951_001_dj7_3600_5400.jpg",                "https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_001_k4r_3600_5400.jpg",                "https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_004_g66_3600_5400.jpg",                "https://img.lesmao.vip/k/1178/T/XiuRen/6165/6165_001_gwy_3600_5400.jpg",                "https://img.lesmao.vip/k/1178/T/XIAOYU/948/948_020_xcx_3600_5400.jpg",            ],        },        methods: {            handleClick() {                var _this = this                setInterval(function () {                    var i = Math.round(Math.random() * (_this.url_list.length - 1))                    _this.url = _this.url_list[i]                }, 1000)            },        }    })</script>

图解

展示

七、class和style

一看class和style是不是很熟悉，对、没错。就是属性，而且本身他俩就属于属性指令，但是他俩比较特殊，再加上应用广泛，所想着单独拿出来研究。

:class="变量"、变量可以是字符串数组以及对象，推荐使用数组
:style="变量"、变量可以是字符串数组以及对象，推荐使用对象

代码

        Title    <script src="js/vue.js"></script>        class
    我是class---div
    style
    我是style---div
<script>    var vm = new Vue ({        el: "#app",        data: {            classList:["font"],            styleObj:{color:"yellow",fontsize:"80px"}        },    })</script>

图解

展示

八、条件渲染

v-if=条件放在标签上如果条件成立在这个标签显示如果条件不成立就不显示
v-else-if=条件放在标签上如果条件成立在这个标签显示如果条件不成立就不显示
v-else=条件放在标签上上面的条件不成立才显示这个标签

代码

        Title    <script src="js/vue.js"></script>    通过分数显示对应的文字
    优秀
    良好
    良好
    挂科
<script>    var vm = new Vue({        el: "#app",        data: {            score: 99        },    })</script>

图解

展示

九、列表渲染

        Title    <script src="js/vue.js"></script>                                                                v-if-v-for 显示购物车
                                    
                                                                                                                id                             商品                             价格                         
                        
                                                                            {{item.id}}                             {{item.name}}                             {{item.price}}                         
                        
                    
                
            
        
    
<script>    var vm = new Vue({        el: "#app",        data: {            show: false,            good_list: [                {id: 1, name: "pen", price: "29"},                {id: 2, name: "pencil", price: "9"},                {id: 3, name: "eraser", price: "3"},                {id: 4, name: "box", price: "13"},            ]        },        methods: {            handleClick() {                this.show = !this.show            },        }    })</script>

id	商品	价格
{{item.id}}	{{item.name}}	{{item.price}}

图解

展示

关键词：指令系统这个案例