3.vue属性的绑定

最新推荐文章于 2024-05-24 11:04:51 发布
最新推荐文章于 2024-05-24 11:04:51 发布
阅读量315 收藏
点赞数
分类专栏： # vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhiyikeji/article/details/83307079
版权

1.在vue中编写的内容:
    //在使用vue之前必须实例化vue对象
new Vue({
    /*el:指element  需要获取的元素，一定是html中根容器元素
        以后所有的操作均是在这个根容器中进行操作
    */
    el:"#vue-app",
    /*
    data:用于数据的存储，用来写属性
        以key-value的值进行存储
    */
    data:{
        name:"zx",
        website:"https://www.google.com/images/branding/googlelogo/2x/googlelogo_light_color_272x92dp.png", 
        webTag: <a href=' https://www.google.com/images/branding/googlelogo/2x/googlelogo_light_color_272x92dp.png'>谷歌</a>, 
    },
    /**
     * 使用method来存储方法，
     * 使用greet来进行调用
     * 使用this获取当前容器的内容
    * this.name：就是指先找到当前容器的data然后在找到name对应的属性
     */
    methods: {
        greet:function(name){
            return 'Hello Word' + name + "   " + this.name;
        },
       
    }
})
2.在html文件中编写：
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index.html</title>
    <!-- 用于在线引用vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引用css文件 -->
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
   
    <!--vue-app就是我们的根容器，vue均是对vue操作-->
    <div id="vue-app">
        <!--v-bind:用于绑定属性-->
        <a v-bind:href="website">百度</a>
        <input type="text" v-bind:value="name">
        <!--v-html:用于插入标签-->
        <p v-html:"webTag"></p>
    </div>
    <script src="../js/app.js"></script>
</body>
</html>

ZNineSun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue3属性绑定方式分析
老司机的后备箱
10-29 1479
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
Vue.js数据绑定之data属性
12-08
总结来说，Vue.js的`data`属性是实现数据绑定的关键，它允许开发者创建可响应的数据对象，并在视图中动态地展示和更新这些数据。通过`data`属性和Vue的响应式系统，开发者能够构建出高度互动的用户界面，减少了手动...
3.Vue动态绑定属性
weixin_45974259的博客
02-17 4140
1. v-bind的基本使用 某些时候我们并不想将变量放在标签内容中，像这样<h2>{{message}}</h2>是将变量h2标签括起来，类似js的innerHTML。但是我们期望将变量imgURL写在如下位置，想这样<img src="imgURL" alt="">导入图片是希望动态获取图片的链接，此时的imgURL并非变量而是字符串imgURL，如果要将其生效为变量，需要使用到一个标签v-bind:，像这样<img v-bind:src="imgURL"..
Vue属性绑定
lienze.tech
12-06 1860
前言 这几年一直在it行业里摸爬滚打，一路走来，不少总结了一些python行业里的高频面试，看到大部分初入行的新鲜血液，还在为各样的面试题答案或收录有各种困难问题 于是乎，我自己开发了一款面试宝典，希望能帮到大家，也希望有更多的Python新人真正加入从事到这个行业里，让python火不只是停留在广告上。 微信小程序搜索：Python面试宝典 或可关注原创个人博客：https://lienze.tech 也可关注微信公众号，不定时发送各类有趣猎奇的技术文章：Python编程学习 属性绑定 v-bind 如果
VUE3 学习笔记（3）：VUE模板理念、属性绑定、条件渲染、列表渲染
最新发布
众纳百川的博客
05-24 320
VUE模板理念理解、VUE属性绑定、VUE条件渲染、VUE列表渲染
Vue.js绑定class属性
tanxinji的博客
12-25 3227
绑定class属性的格式是 v-bind:class = "语句", 可以缩写为 :class ="语句" 。class属性是可以有多个的，在" "内可以有多种不同的情况。 目录 一、" "内是vue对象内存在的对象 二、" " 内为 [ ] 数组 三、 " "内为 { } json对象 一、" "内是vue对象内存在的对象 :class = " 语句"， 语句中传入的是vue建立的变量，计算属性，函数等的时候，就会把v...
2.Vue3中数据绑定的实现
wenyeqv的博客
06-07 2663
Vue3数据绑定从defineProperty改为Proxy，并且每一个功能抽离成一个模块，这里介绍源码中数据绑定的流程实现
Vue.js绑定属性v-bind
tanxinji的博客
12-24 3734
将标签内的属性值绑定，使其在Vue对象内可以动态修改属性值。使用的就是v-blind:属性名 = "vue变量名" 来将属性绑定。可以缩写为:属性名 = "vue变量名"。如果只是纯文本的话就需要单引号括起来表示一个字符串而不是一个变量。 变量名可以有很多，如: href,src,name,class,style等等。 :属性名 = "vue变量名" 。 注意:" "里的变量需要是vue中存在的，vue的帮助下会自动替换为变量名所对应的值。 代码实...
vue组件动态绑定属性值
JCAL123的博客
07-06 1942
vue组件动态绑定属性值。
【VUE基础】动态绑定属性
Robin的博客
09-02 3140
​ 某些时候我们并不想将变量放在标签内容中，像这样是将变量h2标签括起来，类似js的innerHTML。但是我们期望将变量写在如下位置，想这样导入图片是希望动态获取图片的链接，此时的imgURL并非变量而是字符串imgURL，如果要将其生效为变量，需要使用到一个标签，像这样，而且这里也不能使用Mustache语法，类似，这也是错误的。 ​ 此时vue对象中定义的变量和变量可以动态的绑定到img标签的src属性和a标签的href属性。由于用的很多，vue对他有一个语法糖的优化写法也就是，此时修改imgURL变
Vue基础知识总结 2：vue 动态绑定
学Java，找哪吒
07-15 1万+
大家好，我是哪吒，一个热爱技术的年轻人，架构师，是每一个程序员的梦想，因此，作为一个Java后端程序员，突击前端，迫在眉睫，而目前来说，最火的前端框架无疑就是Vue，我们公司前端也都是Vue，每次与前端联调的时候，因为对前端知识的匮乏，总是很无奈，不破不立，我决定花49天时间，系统的学习一下Vue。因为酷爱斗破苍穹，这一系列就按照斗破苍穹中萧炎的成长历程为系列标题吧。
vue3表单输入绑定
pscool的博客
04-29 2677
注意：v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。vue3可以帮助我们将vue定义的变量绑定到html表单元素上，并且监听到html表单元素修改值时，会将对应的vue定义的变量修改。v-model 还可以用于各种不同类型的输入。注意：要加上下面的样式，才有换行效果哦。多个复选框绑定的是同一个数组或集合的值。单个的复选框，绑定的是布尔类型值。
Python全栈（六）项目前导之8.Vue事件绑定、计算属性、表单输入绑定和自定义组件
01-08
Vue事件绑定、计算属性、表单输入绑定和自定义组件一、事件绑定1.HTML元素事件绑定2.event参数二、计算属性和监听属性1.计算属性computed2.计算属性的set方法3.监听属性watch三、表单输入绑定1.input标签输入绑定2....
Vue2 D3.js demo
03-03
3. **响应式属性**：Vue2提供了响应式系统，当组件的数据发生变化时，视图会自动更新。D3.js的更新模式与Vue的响应式机制相辅相成，使得数据驱动的可视化更加简单。 4. **事件处理**：Vue2提供了一套丰富的事件处理...
vue.js数据绑定操作详解
10-18
3. **HTML属性绑定**： 使用`v-bind`指令（通常简写为`:`)来绑定HTML属性的值。例如： ```html <div v-bind:id="'id-' + id"></div> ``` 这将使元素的`id`属性动态地基于`id`数据属性的值。 4. **绑定表达式**...
vue(Js)从数组中删除元素
热门推荐
zhiyikeji的博客
11-18 6万+
使用方法：arr.splice(arr.indexOf(ele),length):表示先获取这个数组中这个元素的下标，然后从这个下标开始计算，删除长度为length的元素 这种删除方式适用于任何js数组 eg: &lt;template&gt; &lt;div class="users"&gt; &lt;button type="button" class="btn btn-danger" v...
解决npm ERR! code 128
zhiyikeji的博客
03-04 1万+
1.问题描述 在使用npm install时提示以下错误： 2.解决方案 在cmd中输入 npm cache clean --force 在重新npm install即可
vue配置跨域
zhiyikeji的博客
03-08 1万+
1，引入 axious,cd 到你的工程 npm install --save axios vue-axios 在 main.js 中加入 import Vue from 'vue' import axios from 'axios' Vue.prototype.$axios = axios 注意 Vue.prototype.axios=axios这句话就决定了你以后使用axious的时候就必...
实现elementui中input的动态监听
zhiyikeji的博客
03-13 9985
使用 elementui 与不使用 elementui 来监听键盘事件的方式不同: 使用 elementui 的: &lt;el-input v-model=“id” placeholder=“ID” @keyup.enter.native=“handleClick”&gt; 否则的话就会出现大问题 下面通过数据的双向绑定来实现动态的监听 input 的变化，并作出相应的判断: &lt;...
103. vue的双向数据绑定
11-24
具体来说，Vue通过使用ES5的Object.defineProperty(obj,key,val)方法来劫持每个属性的getter和setter，在数据变动时发布消息给订阅者，从而触发相应的回调来更新视图。这样，当数据发生变化时，视图会自动更新，反之...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZNineSun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值