Vue条件渲染
概述
使用v-if、v-show指令根据指定条件渲染元素
v-if
根据条件渲染元素，满足元素直接消失
v-show
根据条件渲染元素，满足调价display=none
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue条件渲染</title>
</head>
<body>
<div id="app">
<span v-if="flag">
这是一个span
</span>
<span v-show="flag">
这是二个span
</span>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
flag: false
}
})
</script>
</html>
Vue属性绑定
概述
使用’v-bind:属性”指令给元素的属性赋值，也可简写成":属性名"
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue属性绑定</title>
</head>
<body>
<div id="app">
<input type="text" v-bind:value="name"><br>
<input type="text" :value="name"><br>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vue = new Vue({
el:"#app",
data:{
name : "小李子"
}
})
</script>
</html>
Vue案例之计算器
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue案例之计算器</title>
</head>
<body>
<div id="app">
<input type="text" v-model="num1">
<select v-model="operate">
<option value="+">加</option>
<option value="-">减</option>
<option value="*">乘</option>
<option value="/">除</option>
</select>
<input type="text" v-model="num2">
= <span v-text="result">结果</span><br>
<button @click="fn1()">计算</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vue = new Vue({
el: "#app"
最低0.47元/天 解锁文章
3829
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
