【Vue】vue模板语法:
template、methods
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>templat、methods</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
<div id='app'>
{{txt}}
<button v-on:click="add()">按钮</button>
</div>
</body>
<script>
new Vue({
el: '#app',
// data:存放Vue中的所有变量
data: {
txt: "这是HTML内容"
},
// template字符串模板：解析html代码
// 注意：如使用模板，默认的html内容会丢失
// template: "<h1>这是template内容</h1>",
// methods：存放Vue中的所有（方法、功能、函数）
methods: {
add() {
alert(this.txt)
}
}
})
</script>
</html>
innerText、innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>innerText、innerHTML</title>
</head>
<body>
<div id="app1">
</div>
<div id="app2">
</div>
<script>
var div = document.getElementById("app1")
div.innerText = "<h1>这是innerText内容</h1>"
var div = document.getElementById("app2")
div.innerHTML = "<h1>这是innerHTML内容</h1>"
</script>
</body>
</html>
v-text、v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-text、v-html</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
<div id='app1' v-text="txt">
<!-- v-text:只能解析文本，不能解析标签 -->
</div>
<div id='app2' v-html="txt">
<!-- v-html:能解析标签 -->
</div>
</body>
<script>
new Vue({
el: '#app1',
data: {
txt: "<h1>这是v-text内容</h1>"
}
})
new Vue({
el: '#app2',
data: {
txt: "<h1>这是v-html内容</h1>"
}
})
</script>
</html>
v-bind、v-on
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-bind、v-on</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<!-- v-bind："单向"数据绑定 -->
<!-- 第一种写法：v-bind:需要绑定的属性="定义好的变量名" -->
<input type="text" v-bind:placeholder="txt">
<!-- 第二种写法： :需要绑定的属性="定义好的变量名" -->
<input type="text" :placeholder="txt">
<br>
<!-- v-on：监听事件（click点击事件）【一般搭配函数使用】 -->
<!-- 第一种写法：v-on:事件名="函数名()" -->
<button v-on:click="add(10,20)">相加</button>
<!-- 第二种写法：@：时间名="函数名()" -->
<button @click="min(10,20)">相减</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
txt: "登录"
},
methods: {
add(x, y) {
alert(x + y)
},
min(x, y) {
alert(x - y)
}
}
})
</script>
</html>
v-if、v-else-if、v-else
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-if、v-else-if、v-else</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<!-- Vue中所有的指令基本上都是写在"标签体"里面 -->
<!-- v-if：控制样式内容显示与隐藏 -->
<!-- 写法：v-if="条件值"，条件值为true，绑定的内容就会显示，false则不会显示 -->
<div v-if="type=='a'">v-if</div>
<!-- v-else-if -->
<div v-else-if="type=='b'">v-else-if</div>
<!-- v-else：需要和v-if搭配使用，v-if的条件值为false，v-else绑定的内容才会显示 -->
<div v-else>v-else</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
type: "a"
}
})
</script>
</html>
v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-show</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<!-- v-show写法：v-show="条件值"，条件值为true，绑定的内容就会显示，false则不会显示 -->
<div v-show="flag">v-show</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
flag: true
}
})
</script>
</html>
v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<style>
#app {
width: 1000px;
}
div {
display: inline-block;
width: 300px;
}
</style>
</head>
<body>
<div id='app'>
<div class="p">
<li>h2+p实现</li>
<h2>星期几？</h2>
<p>星期一</p>
<p>星期二</p>
<p>星期三</p>
<p>星期四</p>
<p>星期五</p>
<p>星期六</p>
<p>星期日</p>
</div>
<!-- v-for：连续出现重复"标签"的时候会用的，将v-for写在连续出现的"标签体里面" -->
<!-- 写法：v-for="item in 定义好的数组/对象名" -->
<!-- 注意：item指的是每一项元素 -->
<div class="p">
<li>v-for数组["元素","元素"]实现</li>
<h2>星期几？</h2>
<p v-for="item in arr">{{item}}</p>
</div>
<div class="p">
<li>v-for数组[{对象},{对象}]</li>
<h2>星期几？</h2>
<p v-for="item in arr2">{{item.txt}}</p>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
arr: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
arr2: [
{ txt: "星期一" },
{ txt: "星期二" },
{ txt: "星期三" },
{ txt: "星期四" },
{ txt: "星期五" },
{ txt: "星期六" },
{ txt: "星期日" }
]
}
})
</script>
</html>
扫一扫
2663
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
