给id属性用v-bind动态绑定对象和字符串

最新推荐文章于 2024-03-18 04:03:51 发布
最新推荐文章于 2024-03-18 04:03:51 发布
阅读量9.5k 收藏 1
点赞数 2
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23614619/article/details/79157310
版权
class和id 动态的绑定一个字符串达到自定义名称的方法：:class="'字符串'+item. value"  :id="'字符串'+item. value"

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>分配</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <style type="text/css">
 table{border:#ccc 0px solid; margin:0px auto;}
 th{height:40px; line-height:40px; border-bottom:#ccc 1px solid;}
 td{height:30px; line-height:30px; border-bottom:#ccc 1px solid; font-size:12px;}
  </style>
</head>
<body>
<div id="app" style="width:1000px; overflow: auto; margin:0px auto">
<table  width="1000" border="0" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      
      <th width="150" align="center">区域</th>
      <th width="150" align="center">店</th>
      <th  align="center">组</th>
    </tr> 
  </thead>
  <tbody>
    <tr v-for="(item,index) in res">
      
      <td align="center">{{item.area}}</td>
      <td align="center">{{item.store}}</td>
      <td align="left">
      <span  v-for="(items,indexs) in item.group"><input type="radio" name="group" :value="items.group_id" :id="'group'+items.group_id"><label :for="'group'+items.group_id">{{items.group_name}}{{items.people_num}}人[{{items.manager}}]</label></span>
      
     </td>
    </tr>




    
  </tbody>
</table>
</div>
<script>
new Vue({
  el:"#app",
  data:{
    res:[
    {
        "area":"唐山地区",
        "area_id":"10",
        "store":"凤凰园店",
        "store_id":"11",
        "nature":"1",
        "group":[
            {
                "group_name":"B组",
                "manager":"李凯旋",
                "people_num":"18",
                "group_id":"120"
            },
            {
                "group_name":"C组",
                "manager":"靳国强",
                "people_num":"10",
                "group_id":"121"
            },
            {
                "group_name":"E组",
                "manager":"张少龙",
                "people_num":"7",
                "group_id":"122"
            }
        ]
    },
    {
        "area":"唐山地区",
        "area_id":"20",
        "store":"天元骏景店",
        "store_id":"21",
        "nature":"1",
        "group":[
            {
                "group_id":"123",
                "group_name":"A组",
                "manager":"刘海生",
                "people_num":"16"
            },
            {
                "group_id":"124",
                "group_name":"C组",
                "manager":"殷志豪",
                "people_num":"11"
            },
            {
                "group_id":"125",
                "group_name":"D组",
                "manager":"张硕",
                "people_num":"5"
            }
        ]
    }
]
  }
});
</script>
</body>

</html>

具体方法可以参考：http://blog.csdn.net/xiongmaodeguju/article/details/78526594###;

龙小王
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Asp.net中的数据绑定Eval和Bind应用示例
01-02
关键字: Eval （单项绑定）单项的数据绑定一般用于数据展示。Eval数据绑定应用的反射原理来返回数据。...%> 带格式字符串的数据绑定 <%#Eval(“属性名称”,”Home.aspx?id={0}”)%> Bind 一
灵活掌握asp.net中gridview控件的多种使用方法（下）
01-02
11.GridView实现用“…”代替超长字符串： 效果图：   解决方法：数据绑定后过滤每一行即可 for (int i = 0; i <= GridView1.Rows.Count - 1; i++) { DataRowView mydrv; string gIntro; if (GridView1....
vue基础知识（三）
发果叁
06-27 1863
v-bind 对于类名操作的增强, 需要注意的是:class 不会影响到原来的 class 属性。:class=“对象/数组”(1) :class=“对象”{ 类名: 布尔值, 类名: 布尔值 }如果是true, 加上这个类, 如果是false, 移除这个类(2) :class=“数组”[‘类名1’, ‘类名2’, ‘类名3’]只要有这个类, 就加上:style=“对象”例如 :style=“{ width: ‘200px’ }”是 vue 为开发者提供的功能，常用于文本的格式化。过滤器主要是用来转换格式。
Vue报错Interpolation inside attributes has been removed.解决方法
世纪末的架构师的博客
08-22 1万+
文章目录一、报错问题二、解决方法总结 一、报错问题 基于Vue开发项目时，需要用到v-for循环来循环遍历生成组件，在写好内容后保存运行时之后出现了这样的报错，将问题解决后在此留下记录，供日后回过头来复习 报错时的代码如下： 二、解决方法 将HTML标签中使用到插值表达式的属性前加一个:，把{{}}去掉即可 运行结果： 总结 报Interpolation inside attributes has been removed. Use v-bind or the colon shorthand
【Vue知识体系总结 2】Vue动态绑定v-bind
最新发布
m0_60667406的博客
03-18 742
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它9906)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）[外链图片转存中…(img-pmb6MBd3-1710705819907)]开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端 框架 Vue笔试题
qq_42740465的博客
03-27 1008
前端 框架 Vue笔试题
Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.
stefanie_sun723的博客
06-24 3114
报错原因:Vue里面标签的属性中不能直接使用插值表达式。
【Vue2】Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.
HEX9CF的技术博客
12-18 290
确保在你的 Vue 2 模板中将所有的属性绑定语法改为正确的格式，这样就可以避免这个错误。这个错误是由于 Vue 2 模板中使用了不支持的插值语法。在 Vue 2 中，使用。进行属性绑定是不支持的，应该使用。
ExtAspNet v2.2.1 （2009-4-1） 值得一看
04-01
-v0.2beta2版本中关于PersistChildren(true)的描述有误，这个是设计时属性，和运行时是否保持状态没有关系。 -修正CheckBox控件的CheckedChanged事件会被触发两次的BUG（Data PostBack->AutoPostBack, Event ...
svelte-dragdroplist:带有Svelte 3的可排序列表。动画，触摸友好且可访问
04-30
Svelte-DragDropList 排序列表。 为什么要使用这个组件？ 双向绑定-用户将列表项拖放到新位置后，数据顺序就会立即更新，甚至在删除之前全触摸支持-不使用... / script >唯一ID 如果不确定字符串是否唯一，则应传递对象
ExtAspNet_v2.3.2_dll
09-29
-v0.2beta2版本中关于PersistChildren(true)的描述有误，这个是设计时属性，和运行时是否保持状态没有关系。 -修正CheckBox控件的CheckedChanged事件会被触发两次的BUG（Data PostBack->AutoPostBack, Event ...
Vue用v-for给循环标签自身属性添加属性值的方法
10-17
主要介绍了Vue用v-for给循环标签自身属性添加属性值的方法，文中大家给大家列举了三种方法 ,需要的朋友可以参考下
v-bind
我的博客
05-02 2511
v-bind指令 v-bind作用：动态绑定属性 除了内容需要动态决定，有些属性我们也希望动态绑定 比如a元素的href属性、img元素的src属性
报错Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.
lx227227的博客
04-24 5790
uniapp 小程序报错：Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use . 代码为： <view v-for="value in item.value" :key="value.id" @cli...
V-bind详细使用
热门推荐
CaseyWei
10-22 6万+
v-bind 主要用于属性绑定，Vue官方提供了一个简写方式:bind，例如： 1 2 &lt;!--完整语法--&gt; &lt;av-bind:href="url"&gt;&lt;/a&gt; 1 2 &lt;!--缩写--&gt; &lt;a:href="url"&amp...
#动态绑定属性和方法
weixin_57017847的博客
04-13 58
#一个Student类可以创建N多个Student类的实例对象，每个实例对象的属性值不同 class Student: #Student 类对象 def __init__(self,name,age):# self.name=name self.age=age def eat(self): print(self.name+'在吃饭') #Student 实例对象 stu1=Student('法外狂徒',30) stu2=Student('.
v-bind用法详解
青山不改，绿水长流。
09-24 4546
因此，在v-bind 用于 style 时，Vue.js 专门增强了它。v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。值得一提的是 当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。（3）甚至我们可以在数组中用三元运算符，你也想根据条件切换列表中的 class，可以用三元表达式。（2）我们可以把一个数组传给 v-bind:class，以应用一个 class 列表。
v-bind:href= 拼接字符串 - 代码篇
草巾冒小子的博客
03-01 8364
vuejs标签属性数据绑定和拼接 v-bind:href= 拼接字符串 v-bind绑定href 的值（拼接属性值 String） 参考csdn文章：终于知道vue.js标签属性数据绑定和拼接 代码实例如下： &amp;lt;a class=&quot;didi-link&quot; v-bind:href=&quot;['xxx/detail/'+item.Id]&quot; &amp;gt; {{item.Name}} &amp;
动态绑定id，根据ref动态获取元素解决不能动态绑定ref的问题；elementui框架中绑定动态的ref，动态绑定v-model
Sunny_lxm的博客
08-29 7281
（一）、动态绑定id //动态绑定id <button @click="insertAtCursor(item,index)" type="button" :id="'btn'+index">插入字</button> //<button @click="insertAtCursor(item,index)" type="button" :id="`btn${in...
v-bind：class
12-02
`v-bind:class`是Vue.js中的一个指令，用于绑定HTML元素的class属性。它可以根据表达式的值动态地切换class。具体来说，当表达式的值为真时，指令所绑定的class会被添加到元素的class属性中；当表达式的值为假时，指令所绑定的class会被从元素的class属性中移除。 以下是一个使用`v-bind:class`的示例： ```html <div id="app"> <div v-bind:class="{ 'active': isActive }"></div> </div> ``` 在上面的示例中，`v-bind:class`指令绑定了一个对象，该对象有一个属性`active`，它的值为`isActive`。如果`isActive`为真，则`active`类会被添加到`<div>`元素的class属性中；如果`isActive`为假，则`active`类会被从`<div>`元素的class属性中移除。 除了绑定对象外，`v-bind:class`还可以绑定数组。在这种情况下，数组中的每个元素都会被添加到元素的class属性中。以下是一个使用数组绑定的示例： ```html <div id="app"> <div v-bind:class="[activeClass, errorClass]"></div> </div> ``` 在上面的示例中，`v-bind:class`指令绑定了一个数组，该数组包含两个变量`activeClass`和`errorClass`。这两个变量的值都是字符串，它们会被添加到`<div>`元素的class属性中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值