网站首页 > 基础教程 正文
一个简单的vue页面展示一下参数获取
Bash
<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>
如何设置属性
Bash
<div v-bind:title="title">鼠标移动上去看一下</div>
v-bind 设置属性
Bash
<div :title="title">鼠标移动上去看一下</div>
绑定属性简写:title
绑定html
v-html 绑定html
Bash
<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"
Bash
<div v-text="msg"></div>
绑定对象语法
v-bind:class="{'red':flag}"
Bash
<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)