标签：style col ext code body css items 表达式 根据
原文引用https://www.dazhuanlan.com/2019/08/26/5d62f841c97fd/
1.v-text
1
2
3
4
5
6
7
8
9
10
11
12<div id="app">
<p>{{msg}}</p> //这两个作用一样
<span v-text="msg"></span>
</div>
<script>
new Vue({
el: ‘#app‘,
data:{
msg:‘hello‘
}
})
</script>
2.v-html
1
2
3
4
5<span v-html="msg"></span>
data:{
msg:‘<h1>hello</h1>‘
}
3.v-bind
v-bind 主要用于属性绑定，class属性，style属性，value属性，href属性等等,Vue官方提供了一个简写方式 :bind
①绑定class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<body>
<div id="app">
<span v-bind:class="{active:isActive}" v-text=‘msg‘></span>
</div>
<script>
new Vue({
el: ‘#app‘,
data:{
isActive:true,
msg:‘hello‘
}
})
</script>
<style>
.active{
background-color: #000;
}
</style>
</body>
②绑定style
1
2
3
4
5<div v-bind:style="{ color: activeColor, fontSize: fontSize + ‘px‘ }"></div>
data: {
activeColor: ‘red‘,
fontSize: 30
}
3.v-show
根据表达式之真假值，切换元素的 display CSS 属性。
1
2
3
4
5
6
7
8
9
10
11
12
13 <div id="app" v-show=‘display‘>
<p>{{msg}}</p>
</div>
<script>
new Vue({
el: ‘#app‘,
data:{
display: flase, //false时不展示
isActive:true,
msg:‘hello‘
}
})
</script>
4.v-if v-else
1 |
<div id="app" v-show=‘display‘> |
5.v-for
源数据多次渲染元素或模板块
1
2
3
4
5
6
7
8
9
10
11
12
13 <div id="app">
<ul >
<li v-for="item in items">{{item.msg}}</li>
</ul>
</div>
<script>
new Vue({
el: ‘#app‘,
data:{
items:[{msg:‘qq‘},{msg:‘ww‘},{msg:‘aa‘}],
}
})
</script>
6.v-on
绑定事件监听器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 <div id="app">
<button v-on:click="doo"></button>
</div>
<script>
new Vue({
el: ‘#app‘,
methods:{
doo:function(){
alert("你好")
}
}
})
</script>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
7.v-model
实现数据双向绑定
1
2
3
4
5
6
7
8
9
10
11 <div id="app">
<input type="text" v-model="msg">
<p>{{msg}}</p>
</div>
<script>
new Vue({
el: ‘#app‘,
data:{
msg:‘ni‘}
})
</script>
标签：style col ext code body css items 表达式 根据
原文地址：https://www.cnblogs.com/petewell/p/11410427.html
