【Vue.js学习笔记Day03】v-bind指令的学习

最新推荐文章于 2024-09-13 14:34:15 发布

共你山今

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量146

点赞数

分类专栏： # 【前端】Vue 个人知识体系文章标签： js vue.js html

本文链接：https://blog.csdn.net/weixin_45357284/article/details/108425659

版权

【前端】Vue 个人知识体系专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前提:如果我们想要修改按钮标签的标题的话，如果直接赋值在title里面是无法渲染出来的,他只能把data里面需要渲染的数据直接当成字符串解析出来，达不到我们想要的效果，先看代码再看效果图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind指令</title>
</head>
<body>
     <div id="app">
          <!--这里直接把data里面的mytitle放在了title这个属性里，而html把他当成了一个字符串-->
         <input type="button" value="按钮" title="mytitle">
     </div>
</body>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            mytitle:'这是我自定义的标题'
        }
    })
</script>
</html>

在这里插入图片描述
如果我们要告诉title这是一个变量的话，该怎么做呢？

使用v-bind: 指令提供用于绑定属性的指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind指令</title>
</head>
<body>
     <div id="app">
         <!--这里直接把data里面的mytitle放在了title这个属性里，而html把他当成了一个字符串-->
         <!--v-bind: 是vue中绑定的指令 -->
         <input type="button" value="按钮" v-bind:title="mytitle">
     </div>
</body>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            mytitle:'这是我自定义的标题'
        }
    })
</script>
</html>

在这里插入图片描述
v-bind: 会把引号里面的东西当成js表达式来执行他能够在后面加上自己想要的字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind指令</title>
</head>
<body>
     <div id="app">
         <!--这里直接把data里面的mytitle放在了title这个属性里，而html把他当成了一个字符串-->
         <!--v-bind: 是vue中绑定的指令 -->
         <!--他这里会把他变成js来解析-->
         <input type="button" value="按钮" v-bind:title="mytitle+'123'">
     </div>
</body>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            mytitle:'这是我自定义的标题'
        }
    })
</script>
</html>