首页 > 其他分享 >vue:v-bind

vue:v-bind

时间:2023-03-02 23:14:24浏览次数:44  
标签:vue bind props qwer qin template items

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div class="app">
<txx v-for="qwer in items" v-bind:qin="qwer">

</txx>
</div>


<script>
Vue.component("txx",{
props:['qin'],
template: '<P>{{qin}}</P>'
});
var vm = new Vue({
el: ".app",
data: {
items:[
"ohaev","chaunld","cjphoqgyif"
]
}
});
</script>
</body>
</html>
v-for="qwer in items"从items中循环数据并赋给qwer,qwer通过v-bind:qin把参数传给qin,
template: '<P>{{qin}}</P>'接收qin传的参数,<txx>调模板显示出来,实现遍历数据(props:['qin']相当于new一个变量)







标签:vue,bind,props,qwer,qin,template,items
From: https://www.cnblogs.com/tttx/p/17173945.html

相关文章

  • vue
    基础三部分:<template>视图  有且只有一个跟标签<view><script>思路代码<style>样式<template>  <view>    <view>当前标题{{title}}</view>   ......
  • #yyds干货盘点#vue3 语法糖setup 兄弟组件传值
    使用mitt//全局引入npminstallmitt或者cnpminstallmitt在main文件中挂载import{createApp}from'vue'importAppfrom'./App.vue'importmittfrom'mitt'//导......
  • Vue在开发中的实战使用
    Vue在开发中的实战使用解决SPA单页应用首屏加载慢首屏时间(FirstContentfulPaint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全......
  • vue-cli
    Vue-clivue-cli创建项目1.下载node解释器在node官网中下载node解释器,安装时一直下一步就行2.验证node下载完是自动添加环境变量的,可以在cmd中输入node来验证......
  • vue3自动引入插件
    unplugin-auto-import/vite配置完成之后使用refreactivewatch等无须import导入可以直接使用installnpmi-Dunplugin-auto-import vite配置//vite.confi......
  • vue+vant项目中 rem适配配置
    vantrem适配,需要安装两个插件postcss-pxtorem 是一款postcss插件,用于将单位转化为rem  lib-flexible 用于设置rem基准值postcss-pxtorem:npminstallpostc......
  • Vue3 常见错误
    1.UncaughtSyntaxError:Therequestedmodule'/node_modules/.vite/vue-router.js?v=4b09f9b8'doesnotprovideanexportnamed'default'【解决】vue-router的配......
  • CentOS7加入AD域(winbind)
    作者:独笔孤行官网:​​ ​​http://anyamaze.com​​公众号:云实战前言AD域(ActiveDirectory)是Windows服务器的活动目录,在目录中可以收录公司的电脑账号,用户账号,组等信息,以......
  • Vue2中EventBus总线使用
    参考https://juejin.cn/post/6995015040805896200在utils文件夹中创建bus.js文件importVuefrom'vue';exportconstBus=newVue();在需要的地方使用//Fisr......
  • vue项目实践1,项目中各个文件夹
    vue-cli脚手架初始化项目。node+webpack+淘宝镜像node_modules文件夹:项目依赖文件夹public文件夹:一般放置一些静态资源(图片),放在public里面的静态资源,webpack在进......