一,绑定一个点击事件
<button v-on:click="change">点击</button>
简写方法
<button @click="change">点击</button>
二,v-model 双向绑定
<div id="app">
<input type="text" v-model="nickname" />
<p>{{nickname}}</p>
//转换成大写
<h1>{{nickname.toUpperCase()}}</h1>
</div>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
nickname:"ssss"
}
},
mounted() {
},
methods: {
},
})
</script>
三,Vue的属性绑定
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
四 ,v-show显示与隐藏
<div v-for="(item, i) in nav">
<div class="headert" v-show="activeinex==i" @mouseleave='leavey'></div>
</div>
<div id="app">
<p v-show="isMask">ssss</p>
</div>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
isMask: true,//true 显示 / false 隐藏
}
},
mounted() {
},
methods: {
},
})
</script>