vue.js 学习笔记1--给对象的属性绑定值（包含图片的路径绑定与拼接）

weixin_38522914

于 2020-06-09 11:26:32 发布

阅读量333

点赞数

分类专栏： vue学习笔记文章标签： js

本文链接：https://blog.csdn.net/weixin_38522914/article/details/106636886

版权

vue学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

给标签的属性绑定值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="box">
         {{a}}
         <p>{{str}}</p>
         <!--给对象的属性绑定值-->
         <p v-bind:title="a">hello</p>
         <p :title="a">hello</p>
         <!--给对象的属性绑定值-->
         <img v-bind:src="'img/'+url+'.jpeg'" width="100" />
         <img v-bind:src=`img/${url}.jpeg` width="100" />
         
    </div>
    <script>
         var vm =  new Vue({
                el:"#box", //表示把vue的是实例挂载到id叫box的元素上                          //body ,html不能挂载
                data:{
                    str:"hello world",
                    a:123,
                    url:"3"  //存储的图片的名字
                },
                //如果有模板先渲染模板
               // template:"<div><div>hello</div><div>world</div></div>"  //temlate指定渲染数据的模板
           })
    </script>
</body>
</html>

weixin_38522914

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js 学习笔记1--给对象的属性绑定值（包含图片的路径绑定与拼接）

给标签的属性绑定值：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"&gt
复制链接

扫一扫

专栏目录