一个简单的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>