12-Vue的使用-安装 - 条件渲染
一、安装
1. 去vue官网： https://cn.vuejs.org/
2. 引入vue.js文件
<body>
<script src="vue.js"></script>
</body>
引入vue.js文件之后，Vue被注册为一个全局的变量，它是一个构造函数。
三、使用Vue实例化对象
<body>
<div id = 'app'>
<!--title对应data中的title-->
<h3>{{title}}</h3>
</div>
<!--引入vue -->
<script src="vue.js"></script>
<script>
// 1. 创建vue实例化对象
//参数
var appp = new Vue({
//表示我要使用当前id=app标签 来显示我的内容
el:"#app",
// 所有的数据都放在数据属性中
data:{
title:'土豆'
}
})
</script>
</body>
ps： 这个el属性其实就是我们这个文档流
条件渲染
<!--//指令系统 v-*-->
<div v-if='show'>哈哈哈哈哈</div>
0.点击事件
<button v-on:click = "clickHandler">切换</button>
// 实例化一个vue对象
var app = new Vue({
el:'#app',
data:{
msg:'今天学习vue',
msg2:'今天学习vue2',
show:false,
},
//methods是绑定事件的执行
methods:{
//点击后执行这个函数操作
clickHandler: function(){
console.log(this)
// 将show属性变成ture
this.show = true; }
}
})
v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
<h1 v-if="awesome">Vue is awesome!</h1>
也可以用 v-else 添加一个“else 块”：
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no12-Vue的使用-安装 - 条件渲染的更多相关文章
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
- Vue.js学习 Item7 -- 条件渲染与列表渲染
v-if 在字符串模板中,如 Handlebars,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1 ...
- vue学习笔记(五)条件渲染和列表渲染
前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...
- 02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定
vue基础 声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 Example1 <!DOCTYPE html> <html> ...
- Vue学习5：条件渲染
上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- vue js库的条件渲染
条件渲染 通过条件指令可以控制元素的创建(显示)或者销毁(隐藏),常用的条件指令如下: v-if v-if可以控制元素的创建或者销毁 <h1 v-if="ok">Yes ...
- vue入门：（条件渲染）
v-if v-show v-else 一.v-if:生成或者移出一个元素 <div id="example"> <button v-on:click=" ...
- Vue学习之--------绑定样式、条件渲染、v-show和v-if的区别（2022/7/12）
文章目录 1.绑定样式 1.1 基础知识 1.2 代码实例 1.3 测试效果 2.条件渲染 2.1 基本知识 2.2 代码实例 2.3 测试效果 1.绑定样式 没啥好说的.我觉得还没直接引入外部写好的 ...
- Vue条件渲染
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08 一 v-if显示单个元素 注意else只能跟在v-if或者v-s ...
随机推荐
- 031 Android 自定义控件
1.自定义控件的优点 Android自身带的控件不能满足需求, 需要根据自己的需求定义控件. 2.自定义控件的分类: (1)组合已有的控件实现 (2)继承已有的控件实现(扩展已有的功能) (3)完全自 ...
- Linux基础-07-系统的初始化和服务
1. Linux系统引导的顺序 1) Linux系统引导的顺序: 其中,BIOS的工作是检查计算机的硬件设备,如CPU.内存和风扇速度等: MB ...
- C++打印乘法表
#include <iostream> #include <Windows.h> #include <iomanip> using namespace std; i ...
- 12.Scratch编程小游戏——天上掉馅饼
最意想天开的事,就是天降我们喜欢的食物,今天我们就来编写一个接馅饼的小游戏. 游戏规划: 1.用鼠标控制小猫的来回移动 2.甜甜圈从天而降 3.小猫接到绿色的甜甜圈减一分,接到红色的甜甜圈加一分,接到 ...
- Spring AOP日志实现（一）
前置通知:获取访问的类,访问的方法,带参数和不带参数的 日志表信息描述字段: 获取访问时长:
- stm32f103re stop模式下降低功耗
一端口设置1.将N.C的GPIO统一配置为GPIO_Mode_AIN: 2.检查输入引脚,按照不工作时候的状态相应配置为 IPD/IPU,即避免在内部上/下拉电阻上消耗电流,而且该电流理论值为VCC ...
- Tomcat Lifecycle
org.apache.catalina.Lifecycle 接口统一管理生命周期,所有生命周期组件都要实现Lifecycle接口. 该接口定义了13个String类型的常量,用于LifecycleEv ...
- 洛谷P3372--线段树代码模板1
如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数加上x 2.求出某区间每一个数的和 输入格式 第一行包含两个整数N.M,分别表示该数列数字的个数和操作的总个数. 第二行包含N个用空格 ...
- 3.Ubuntu/Deepin下安装Monaco/Menlo字体
前段时间在一家公司实习,让IT给电脑安装了Ubuntu系统,用着挺好,但总感觉字体不太好看,网上小伙伴说Monaco字体不错,所以计划安装试试. 看了好多教程,不得不说,一些教程走下来真心是装不成功, ...
- Java 之 File类（文件操作）
一.概述 java.io.File 类是文件和目录路径名册抽象表示,主要用于文件和目录的创建.查找和删除等操作. File类是一个与系统无关的类,任何的操作系统都可以使用这个类中的方法. 路径问题: ...