07-vuejs研究-vuejs基础-v-bind指令

最新推荐文章于 2024-07-31 16:33:32 发布

feng_fly_28

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量55

点赞数

分类专栏： day02 CMS前端开发文章标签： html javascript

本文链接：https://blog.csdn.net/minihuabei/article/details/112827566

版权

day02 CMS前端开发专栏收录该内容

19 篇文章 0 订阅

订阅专栏

v-bind

1、作用：
v‐bind可以将数据对象绑定在dom的任意属性中。
v‐bind可以给dom对象绑定一个或多个特性，例如动态绑定style和class
2、举例：

   <img v‐bind:src="imageSrc">       
   <div v‐bind:style="{ fontSize: size + 'px' }"></div>

3、缩写形式

<img :src="imageSrc">       
<div :style="{ fontSize: size + 'px' }"></div

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令的测试</title>
</head>
<body>
<div id="app">
    <a v-bind:href="url">百度</a>
    <div v-bind:style="{ fontSize: size + 'px' }">javaEE培训</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
    //编写MVVM中的model部分及VM（ViewModel）部分
    var VM = new Vue({
        el:'#app',//vm接管了app区域的管理
        data:{//model数据
            url:'http://www.yunhe.cn',
            size:11
        }
    });
</script>
</html>

在这里插入图片描述

feng_fly_28

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
07-vuejs研究-vuejs基础-v-bind指令

v-bind1、作用：v‐bind可以将数据对象绑定在dom的任意属性中。v‐bind可以给dom对象绑定一个或多个特性，例如动态绑定style和class2、举例： <img v‐bind:src="imageSrc"> <div v‐bind:style="{ fontSize: size + 'px' }"></div> 3、缩写形式<img :src="imageSrc"> &
复制链接

扫一扫

专栏目录