【Vue v-事件总结】v-bind

最新推荐文章于 2024-04-21 18:51:25 发布

Code apprenticeship

最新推荐文章于 2024-04-21 18:51:25 发布

阅读量431

点赞数

分类专栏：前端 # vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_46290969/article/details/122412798

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

**

vue mustache （双大括号语法）

不仅可以写变量，也可以写一些简单的表达式

v-once：

不会随着变量改变而改变

v-html:

把一个url转换成html页面

v-text:

类似v-html转换乘text文件

v-pre:

双大括号不希望改变里面的数值，只是想显示大括号里面的固定内容使用

v-cloak:

斗篷进行一些内容隐藏

v-bind:

动态绑定属性
在这里插入图片描述

这里就不可以用mustache语法采用大括号绑定

语法糖写法：前面直接写个’:'即可

v-bind的类用法：：class=“类名1：boolean值，类名二：Boolean”//动态确定是否采用某个类

v-bind的动态绑定：：style="{key(属性名)：value（属性值)}" :style="{fontsize: ‘50px’ }"

v-on:

给某些按钮或组件绑定事件先绑定事件然后设置method方法

v-for:

<body>
    <div id="app">
   <ul>
     <li v-for="(element,index) in movies">{{index}}-{{ element}}</li>
   </ul>
  </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>

    const app=new Vue({
    
      el: '#app',
      data: {
      movies:['斗罗大陆','火影忍者','进击的巨人']
      }
    });
  </script>
</body>