<div> <ul> <li v-for="blog in blogs">{{blog}}</li> </ul> <ul> <li v-for="stu in stus">姓名：{{stu.name}} 年数：{{stu.age}}</li> </ul> </div>
var app = new Vue({ el:"#app", data:{ blogs:['三国演习','西游记','老汉子'], stus:[ {name:'小明',age:18}, {name:'小张',age:11}, {name:'小王',age:12} ] } })
从处事器中获取数据
<body> <div> <ul> <li v-for="item in books">{{item.title}}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el: '#app', data: { books: [], }, created: function () { fetch('data.json') .then((res) => { return res.json() }) .then((res) => { this.books = res }) }, }) </script>
六、条件渲染 1、v-if指令用于条件性的渲染一块内容<div v-if=true>hello Vue</div>
2、也可以利用v-else添加一个else块<div v-if=false>hello Vue</div> <div v-else>hello world</div>
3、在<template>元素上利用v-if条件渲染分组当需要切换多个元素的时候可以把v-if添加到template内，因为<template>元素是一个不行见元素，渲染的功效将不包括<template>元素
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
4、v-if-else顾名思义就是充当v-if的else if块，可持续利用<div v-if="score==100"> 满分 </div> <div v-else-if="score>=80 && score<100"> 精采 </div> <div v-else-if="score>=70 && score<=60"> 合格 </div> <div v-else-if="score<60"> 不合格 </div> <div v-else> 请输入正确的后果 </div>
5、v-show同样是按照条件展示元素<div v-show="ok">hello</div>
与v-if差异的是v-show的元素会始终被渲染并保存在DOM中。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，假如需要很是频繁地切换，则利用 v-show 较好；假如在运行时条件很少改变，则利用 v-if 较好。
七、Class与Style绑定我们可以利用v-bind来绑定类名或内联样式
绑定class,以动态的切换class,也可以与普通的class共存
<div v-bind:class="{active:isActive,'text-danger:hasError'}"></div>
data{ isActive:true hasError:false }
渲染功效为：
<div></div>
绑定内敛级样式
语法v-bind:style
<div v-bind:style='{color:activeColor,fontSize:fontSize+'px'}'></div>
data:{ activeColor:"red", fontSzie:13 }
也可以直接绑定到一个样式工具中，这样会使模板更清晰
<div v-bind:style="active"></div>
data:{ active:{ color:'red', fontSize:'30px' } }
八、计较属性当我们需要计较模板中的值时可以利用计较属性（computed）
<div> <p>{{message}}</p> <p>{{reverseMessage}}</p> </div>
var app = new Vue({ el:"#app", data:{ message:"Hello" }, computed:{ reverMessage(){ return this.message.split('').reverse().join('') } } })
九、侦听器侦听器可以调查和响应Vue实例上的数据变换
<div> <div> 问题：<input v-model="question"> </div> <div>{{answer}}</div> </div>
var app = new Vue({ el: "#app", data: { question: "", answer: [], }, watch: { question(newValue) { this.getAnswer() } }, methods: { getAnswer: function () { let that = this axios.get('http://localhost:3000/answer.php?q=' + this.question) .then(function (response) { that.answer = response.data }) } } })
php代码
<?php $question = $_GET['q']; $answer=[]; switch($question){ case "小": $answer=['小孩子','小姐姐','小鲜肉']; break; case "小鲜肉": $answer=['小鲜肉是什么','小鲜肉有什么用','小鲜肉可以吃吗']; break; case "小鲜肉演戏": $answer=["小鲜肉演戏太假","小鲜肉被封杀","小鲜肉不会做演员"]; break; } echo json_encode($answer); ?>
演示
nswer = response.data
php代码 ```php <?php $question = $_GET['q']; $answer=[]; switch($question){ case "小": $answer=['小孩子','小姐姐','小鲜肉']; break; case "小鲜肉": $answer=['小鲜肉是什么','小鲜肉有什么用','小鲜肉可以吃吗']; break; case "小鲜肉演戏": $answer=["小鲜肉演戏太假","小鲜肉被封杀","小鲜肉不会做演员"]; break; } echo json_encode($answer); ?>
演示
var el_div = { template: <div><slot></slot></div> }
<div id=app> <el-div> <span>插槽内容</span> </el-div> </div>
当组件渲染时，slot会被替换为<span>插槽内容</span>。插槽内可以包括任何模板代码
后备内容有时为一个插槽配置详细的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。譬喻在一个 <submit-button> 组件中：
<button type="submit"> <slot></slot> </button>
我们大概但愿这个 <button> 内绝大大都环境下都渲染文本“Submit”。为了将“Submit”作为后备内容，我们可以将它放在 <slot> 标签内：
<button type="submit"> <slot>Submit</slot> </button>
此刻当我在一个父级组件中利用 <submit-button> 而且不提供任何插槽内容时：
<submit-button></submit-button>
后备内容“Submit”将会被渲染：
<button type="submit"> Submit </button>
可是假如我们提供内容：
<submit-button> Save </submit-button>
则这个提供的内容将会被渲染从而代替后备内容：
<button type="submit"> Save </button>
有时我们需要多个插槽。譬喻对付一个带有如下模板的 <base-layout> 组件：