网站首页 > 基础教程 正文
一个简单的vue页面展示一下参数获取
<template> <!-- vue的模板里面 所有的内容要被一个根节点包含起来 --> <div id="app"> <h2>{{msg}}</h2> <br> 这是一个根组件 <br> <h3>{{obj.name}}</h3> <br> <hr> <br /> <ul> <li v-for="item in list"> {{item}} </li> </ul> <br> <hr> <br /> <ul> <li v-for="item in list1"> {{item.title}} </li> </ul> <br> <hr> <br /> <ul> <li v-for="item in list2"> {{item.cate}} <ol> <li v-for="news in item.list"> {{news.title}} </li> </ol> </li> </ul> </div> </template> <script> export default { data () { /*业务逻辑里面定义的数据*/ return { msg: '你好vue', obj:{ name:"张三" }, list:['111','222','333'], list1:[ {'title':'11111'}, {'title':'222'}, {'title':'333333'}, {'title':'44444'} ], list2:[ { "cate":"国内新闻", "list":[ {'title':'国内新闻11111'}, {'title':'国内新闻2222'} ] }, { "cate":"国际新闻", "list":[ {'title':'国际新闻11111'}, {'title':'国际新闻2222'} ] } ] } } } </script> <style > </style>
如何设置属性
<div v-bind:title="title">鼠标移动上去看一下</div>
v-bind 设置属性
<div :title="title">鼠标移动上去看一下</div>
绑定属性简写:title
绑定html
v-html 绑定html
<template> <!-- vue的模板里面 所有的内容要被一个根节点包含起来 --> <div id="app"> <div v-html="h">鼠标移动上去看一下</div> </div> </template> <script> export default { data () { /*业务逻辑里面定义的数据*/ return { h:"<h>我是h标签</h>" } } } </script>
绑定数据
v-test="msg"
<div v-text="msg"></div>
绑定对象语法
v-bind:class="{'red':flag}"
<template> <!-- vue的模板里面 所有的内容要被一个根节点包含起来 --> <div id="app"> <!-- 循环中设置class--> <ul> <li v-for="(item,key) in list2" :class="{'red':key==0 ,'blue':key!=0}"> {{item.cate}} <ol> <li v-for="news in item.list" > {{news.title}} </li> </ol> </li> </ul> <!-- 设置class--> <div v-bind:class="{'red':flag,'blue':!flag}">我是一个div</div> <!-- 设置style--> <div class="box" v-bind:style="{width:boxWidth+'px'}">我是一个div</div> </div> </template> <script> export default { data () { /*业务逻辑里面定义的数据*/ return { list2:[ { "cate":"国内新闻", "list":[ {'title':'国内新闻11111'}, {'title':'国内新闻2222'} ] }, { "cate":"国际新闻", "list":[ {'title':'国际新闻11111'}, {'title':'国际新闻2222'} ] } ], h:"<h>我是h标签</h>", boxWidth:500 } } } </script> <style > .red{ color:red; } .blue{ color:blue; } .box{ background-color:red; } </style>
猜你喜欢
- 2024-11-09 vuejs开发入门之工具安装和常用指令
- 2024-11-09 如何在Vue中动态添加类名 vue动态添加的元素进行操作
- 2024-11-09 很全面的vue面试题总结 vue面试题2020例子以及答案
- 2024-11-09 「面试题」和Vue.js有关的41个基础问题
- 2024-11-09 vue中动态指令的用法和event事件 vue动态控制hover
- 2024-11-09 VUE自定义指令 自定义指令的应用场景有哪些?
- 2024-11-09 限时分享!今天花了两小时整理出来的 30道 入门到进阶的 Vue 面试题
- 2024-11-09 VUE实战技巧,让你的代码少一点 vue怎么样
- 2024-11-09 Vue项目常见问题以及解决方案 vue项目开发中遇到的问题
- 2024-11-09 我为什么用Vue.js 我为什么用神仙水皮肤会干
- 03-14从0到1体验Jenkins+Docker+Git+Registry实现CI自动化发布
- 03-14教你测试开发丨测试小白也能听懂的Docker讲解和应用
- 03-14Docker安装及mysql、redis实战(docker安装mysql5.7)
- 03-14Docker技术:大神整理——Harbor私服搭建和使用
- 03-14Springboot项目使用docker部署(springboot docker部署)
- 03-14Linux环境通过Dockerfile创建Tomcat镜像
- 03-14终于有人把Docker讲清楚了,Docker入门教程,原来这么简单...
- 03-14linux下面安装docker(linux安装docker报错)
- 最近发表
-
- 从0到1体验Jenkins+Docker+Git+Registry实现CI自动化发布
- 教你测试开发丨测试小白也能听懂的Docker讲解和应用
- Docker安装及mysql、redis实战(docker安装mysql5.7)
- Docker技术:大神整理——Harbor私服搭建和使用
- Springboot项目使用docker部署(springboot docker部署)
- Linux环境通过Dockerfile创建Tomcat镜像
- 终于有人把Docker讲清楚了,Docker入门教程,原来这么简单...
- linux下面安装docker(linux安装docker报错)
- DeepSeek:一分钟教会你部署Tomcat
- Docker 安装Mysql(流程、注意点、实例)
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)