v-text
将文本内容绑定到html的内容部分，类似插值表达式，但是和v-html有区分，这里对内容进行了转义。具备一定的反前端注入能力。类似js innerText
<body>
<div id="app">
<p v-text="attr"></p>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
attr: "<h1>hello world</h1>"
}
})
</script>
</body>
v-html
将文本内容绑定到html的内容部分，类似插值表达式，但是和v-html有区分，这里对内容进行了转义。类似js innerHTML
<body>
<div id="app">
<p v-html="attr"></p>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
attr: "<h1>hello world</h1>"
}
})
</script>
</body>
v-model
双向绑定，通常用于表单数据绑定。
<body>
<div id="app">
<input v-model="message"> <!-- 发生修改 VM -->
<p>{{ message }}</p><!-- M -> V -->
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
message: "hello world 1"
}
})
</script>
</body>
v-once
绑定数据之后，只渲染一次，之后只有页面从新刷新再次渲染。
<body>
<div id="app">
<div v-once>{{ message }}</div>
<input v-model="message">
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
message: "<h1>hello world 1</h1>"
}
})
</script>
</body>
v-bind
动态绑定属性
<div id="app">
<!-- <h1 v-bind:class="attr" v-bind:id="attr">hello world</h1> 多个属性绑定 -->
<!-- <h1 :class="attr" :id="attr">hello world</h1> 绑定的简写 -->
<!-- <h1 :class="age>18?'pink':'red'">hello world</h1> 可以使用三目表达式和字符串，但是字符串需要加引号，注意引号的嵌套 -->
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
age: 19,
r: "red",
p: "pink"
}
})
</script>
v-on
<body>
<div id="app">
{{ message }}
<span v-on:click='say_hello'>按我呀~~~</span>
<span @click='say_hello'>按我呀~~~</span>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
message: "hello world",
},
methods: {
// say_hello: function(){
// alert("hello world")
// }
say_hello(){
alert("hello world")
}
}
})
</script>
</body>
(1) vue当中要绑定的方法，必须写到vue的methods方法当中
(2) vue采用v-on进行事件绑定，格式
v-on:事件条件='事件函数名称'
(3)v-on可以简写，格式
@事件条件='事件函数名称'
v-if
通过条件判断，来决定是否创建dom对象，注意:创建和销毁dom对象都有很大的资源消耗。
<body>
<div id="app">
<h1 v-if="isShow">看不到我吧</h1>
<h1 v-if="age >= 18">哟，成年了</h1>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
age: 18,
isShow: 0,
}
})
</script>
</body>
v-else-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
<style>
.red{
color: red;
}
.border{
border: 1px black solid;
}
.pink{
color: pink;
}
</style>
</head>
<body>
<div id="app">
<!-- <h1 v-if="isShow">看不到我吧</h1> -->
<!-- <h1 v-if="age >= 34">哟，可以挣钱了</h1> -->
<h1 v-else-if="age >= 22">哟，可以结婚了</h1>
<h1 v-else-if="age >= 18">哟，成年了</h1>
<h1 v-else>少年</h1>
<h1 v-if="age >= 22">哟，可以结婚了</h1>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
age: 17,
isShow: 0,
}
})
</script>
</body>
</html>
v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
<style>
.red{
color: red;
}
.border{
border: 1px black solid;
}
.pink{
color: pink;
}
</style>
</head>
<body>
<div id="app">
<!-- <h1 v-if="isShow">看不到我吧</h1> -->
<!-- <h1 v-if="age >= 34">哟，可以挣钱了</h1> -->
<h1 v-else-if="age >= 22">哟，可以结婚了</h1>
<h1 v-else-if="age >= 18">哟，成年了</h1>
<h1 v-else>少年</h1>
<h1 v-if="age >= 22">哟，可以结婚了</h1>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
age: 17,
isShow: 0,
}
})
</script>
</body>
</html>
(1) v-if后面可以加布尔值也加一个判断的表达式
(2) v-else-if 和 v-else必须配合v-if，在v-if后面出现
(3) 在写判断的时候，要把范围大的写到后面
(4) 请认真的区分一个判断，多个分支和多个判断的区别
v-show
和v-if一样，可以控制元素是否显示，但是不会删除dom元素，而是使用display进行隐藏，所以效率高于v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
<style>
.red{
color: red;
}
.border{
border: 1px black solid;
}
.pink{
color: pink;
}
</style>
</head>
<body>
<div id="app">
<h1 v-if="isShow">看不到我吧--if版本</h1>
<h1 v-show="isShow">看不到我吧--show版本</h1>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
isShow: 0,
}
})
</script>
</body>
</html>
v-for
<body>
<div id="app">
<ul>
<li v-for="item in foods">
{{ item }}
</li>
</ul>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
foods: [
"猪肉炖粉条",
"咸菜",
"梅菜扣肉",
"澳洲龙虾",
"佛跳墙",
"小当家干脆面",
"阳澄湖大闸蟹",
"石头炒泥巴"
]
}
})
</script>
</body>
v-for案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in foods">
<img :src="item.picture"/>
<p>
{{ item.name?item.name:"店铺走丢了" }}
<img v-for="i in item.level" src="./level.png">
</p>
</li>
</ul>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
foods: [
{
picture: "http://p0.meituan.net/biztone/1647448_1629513656647.jpeg%40340w_255h_1e_1c_1l%7Cwatermark%3D0",
name: "珍滋味海鲜粥火锅(工体店)",
level: 5,
},
{
picture: "http://p1.meituan.net/biztone/179215392_1623048677800.jpeg%40340w_255h_1e_1c_1l%7Cwatermark%3D0",
name: "高兴火锅(五道口店)",
level: 3,
},
{
picture: "https://img.meituan.net/msmerchant/054b5de0ba0b50c18a620cc37482129a45739.jpg%40340w_255h_1e_1c_1l%7Cwatermark%3D0",
name: "海底捞火锅(复星国际中心店)",
level: 4,
},
{
picture: "http://p0.meituan.net/biztone/625982373_1633682848208.jpeg%40340w_255h_1e_1c_1l%7Cwatermark%3D0",
name: "芈重山老火锅(五道口店)",
level: 3,
},
{
picture: "https://img.meituan.net/msmerchant/6810ddb6e1fbe7a7debef04affdc7b38188705.jpg%40340w_255h_1e_1c_1l%7Cwatermark%3D0",
name: "巴奴毛肚火锅(丽泽龙湖店)",
level: 6,
}
]
}
})
</script>
</body>
</html>
扫一扫
1859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
