Vue2.0学习笔记-2、v-bind指令

最新推荐文章于 2021-12-06 07:48:43 发布

不收藏找不到我

最新推荐文章于 2021-12-06 07:48:43 发布

阅读量157

点赞数

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

本文链接：https://blog.csdn.net/weixin_41364246/article/details/109576757

版权

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

19 篇文章 0 订阅

订阅专栏

结论：（1）v-bind指令用于给html标签绑定属性，请看示例（1）:
（2）v-bind指令后面双引号的部分可以执行部分js代码，类似但不等同化于原生js中的eval()函数，利用这个特性，我们可以实现示例（2）：
(3)虽然双引号内可以执行简单的js代码，比如加减乘除，但是不能执行函数。(我测试了alert和console.log都不行，自定义函数也不行，因为这些都被当做为变量，而不是函数，然而我们并没有定义这些变量，因此会出错)
(4)v-bind指令的简写形式为 :属性名，即冒号+属性名
示例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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <button id="app" v-bind:title="mytitle+123">按钮</button>
  </body>
  <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "第一个vue实例",
          mytitle: "这是一个自定义的title",
        },
      });
  </script>
</html>

执行结果：
在这里插入图片描述

示例2：
代码：

<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <button id="app" v-bind:title="mytitle+'，我像eval()一样哦'">按钮</button>
  </body>
  <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "第一个vue实例",
          mytitle: "这是一个自定义的title",
        },
      });
  </script>
</html>

效果：
在这里插入图片描述

不收藏找不到我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2.0学习笔记-2、v-bind指令

结论：（1）v-bind指令用于给html标签绑定属性，请看示例（1）:（2）v-bind指令后面双引号的部分可以执行部分js代码，类似但不扽同化于原生js中的eval()函数，利用这个特性，我们可以实现示例（2）：(3)虽然双引号内可以执行简单的js代码，比如加减乘除，但是不能执行函数。(我测试了alert和console.log都不行，自定义函数也不行)(4)v-bind指令的简写形式为 :属性名，即冒号+属性名示例1：代码:<!DOCTYPE html><html la
复制链接

扫一扫

专栏目录