VUE总结

最新推荐文章于 2023-12-28 14:47:02 发布

UltimateGalaxy

最新推荐文章于 2023-12-28 14:47:02 发布

阅读量82

点赞数

分类专栏：前端技术

本文链接：https://blog.csdn.net/qq_43618583/article/details/113113947

版权

前端技术专栏收录该内容

21 篇文章 0 订阅

订阅专栏

data&methods

html调用数据时——{{data}}
html调用方法时——{{function（）}}
在方法中应用属性：
例：methods想拿到data中的name：
——> this.name(this指本实例化对象)
el：element 。需要获取的元素，一定是html中的跟容器元素
data：用于数据存储，也可以是数组，对象
methods：用于存储各种方法

属性绑定

给哪个属性绑定值，就在哪个属性前面加’v-bind’

绑定a元素的href属性

<body>
    <div id="app">
        <a v-bind:href = "baidu" >百度一下</a>
    </div>
</body>     
      <script>
        const app = new Vue({
          el: '#app',         
          data: {
            baidu:"https://www.baidu.com/"
          }  
        })
      </script>

如代码所示，应在href前加v-bind

绑定img元素的scr属性

<body>
    <div id="app">
        <img v-bind:src="imgURL" >
    </div>
</body>     
      <script>
        const app = new Vue({
          el: '#app',         
          data: {
            imgURL :'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png' 
          }
        })
      </script>

v-bind语法糖：

<a :href = "baidu" >百度一下</a>
<img :src="imgURL" >

动态绑定类class
对象语法
v-bind：class = “{类名1：Boolean，类名2：Boolean}”
当布尔值为true的时候，类会被添加在标签上
当布尔值为false的时候，类不会被添加在标签上
动态绑定style
对象语法
v-bind：style = “{key（css属性名）：value（属性值）}”
注意：px——>'px’不加单引号，会被当成变量处理报错。

UltimateGalaxy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE总结

data&methodshtml调用数据时——{{data}}html调用方法时——{{function（）}}在方法中应用属性：例：methods想拿到data中的name：——> this.name(this指本实例化对象)el：element 。需要获取的元素，一定是html中的跟容器元素data：用于数据存储，也可以是数组，对象methods：用于存储各种方法属性绑定给哪个属性绑定值，就在哪个属性前面加’v-bind’绑定a元素的href属性
复制链接

扫一扫

专栏目录