3.条件与循环---(vue入门文档学习记录)

水深无声 2022-10-01 07:54 115阅读 0赞

**条件**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>条件与循环</title>
    		<script type="text/javascript" src="../img/vue.js" ></script>
    	</head>
    	<body>
    		<div>
    			<span id="app-3">
    				<p v-if="seen">
    					{
       {message}}
    				</p>
    			</span>
    		</div>
    		<script>
    			new Vue({
    				el:"#app-3",
    				data:{
    					seen:true,
    					message:"nice!"
    				}
    			})
    		</script>
    	</body>
    </html>

**循环**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript" src="../img/vue.js" ></script>
    	</head>
    	<body>
    		<div id="app-4">
    			<ol>
    				<li v-for=" todo in values">
    					{
       { todo.text}}
    				</li>
    			</ol>
    		</div>
    		
    		<script>
    			var app4=new Vue({
    				el:"#app-4",
    				data:{
    					values:[
    					{text:'学习 js'},
    					{text:'学习vue.js'},
    					{text:'整个牛项目'}
    					]
    				}
    			})
    		</script>
    	</body>
    </html>

### 总结 ###

通过script标签构建模板对象vue(\{\}),对象通过el属性绑定需要渲染的div,通过v-指令进行标签的渲染,\{ \{\}\}进行值的填入.

发表评论取消回复

表情：

评论列表（有 0 条评论，115人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js 条件与循环

vue中如何做条件判断？ v-if 指令 > 1. `<template>` > 2. `<div>` > 3. `<p v-if="seen">现在你看到我了</p

秒速五厘米/ 2024年03月30日 10:37/ 0 赞/ 14 阅读

相关 3.条件与循环---(vue入门文档学习记录)

条件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title

水深无声/ 2022年10月01日 07:54/ 0 赞/ 116 阅读

相关 1.第一个vue.js---(vue入门文档学习记录)

声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统： <!DOCTYPE html> <html>

小灰灰/ 2022年10月01日 07:54/ 0 赞/ 120 阅读

相关 8.插值---(vue入门文档学习记录)

文本数据绑定最经常用的就是"Mustache"语法(两个大括号)的文本插值,注意这里特别标明只是文本插值,如果是html格式也会只显示文本. <span>Mess

爱被打了一巴掌/ 2022年01月12日 12:29/ 0 赞/ 224 阅读

相关 6.数据与方法---(vue入门文档学习记录)

数据与方法当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新

桃扇骨/ 2022年01月11日 06:09/ 0 赞/ 172 阅读

相关 10.指令---(vue入门文档学习记录)

指令指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职

谁借莪１个温暖的怀抱￠/ 2022年01月06日 09:29/ 0 赞/ 162 阅读

相关 9. VUE全局变量与局部变量---(vue入门文档学习记录)

转自:[https://www.cnblogs.com/webxu20180730/p/10890888.html][https_www.cnblogs.com_webxu20

傷城~/ 2022年01月06日 02:25/ 0 赞/ 511 阅读

相关 Vue条件与循环

Vue条件与循环在Vue中控制切换一个元素是否显示也相当简单： <div id="app-3"> <p v-if="seen">现在你看到我了</

痛定思痛。/ 2021年10月19日 23:50/ 0 赞/ 382 阅读

相关 17.条件渲染之 v-if ---(vue入门文档学习记录)

v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。上代码: <!DOCTYPE html>

浅浅的花香味﹌/ 2021年10月19日 07:52/ 0 赞/ 143 阅读

相关 Vue.js 条件与循环

Vue.js 条件与循环 vue中如何做条件判断？ v-if 指令 v-else 指令当然有了if 那else也是必不可少的

朱雀/ 2020年06月26日 15:01/ 0 赞/ 1410 阅读