该博客主要展示了Vue的相关应用。包含v-bind、v-model、v-text、v-html、v-if、v-on、v-for等指令的使用示例，如单一点击事件、双向绑定事件、文本绑定等。还给出了Vue对象计算属性的案例，涉及单价、数量和总价的计算，以及方法和监听器的应用。
<!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">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Document</title>
</head>
<body>
<!-- v-bind单一点击事件 -->
<div id="app">
<h3> v-bind单一绑定事件</h3>
<button v-bind:style="styleValue"> 第一个组件</button>
<hr>
<!-- v-model双向绑定事件 -->
<h3>v-model双向绑定事件</h3>
<button @click="empty()">清除</button>
<select name="city" id="" v-model="city">
<option value="beijing">北京</option>
<option value="beijing1">北京1</option>
<option value="beijing2">北京2</option>
{{city}}
</select>
<!-- v-text 文本绑定事件 -->
<h3>v-text 文本绑定事件</h3>
<p v-text="text"></p>
<hr>
<!-- v-html 文本样式改变 -->
<h3>v-html 文本样式改变</h3>
<p v-html="html1"></p>
<hr>
<!-- v-if -->
<p @click="isTrue=false" v-if="isTrue">if条件指令隐藏元素</p>
<button v-else>控制v-if条件单击隐藏</button>
<p @click="isTrue1=false" v-show="isTrue1">show条件指令显示元素</p>
<hr>
<!-- v-on -->
<h3>v-on指令绑定点击双击、鼠标按下、弹起，悬浮事件</h3>
<button v-on:click="message='第一个meassage指令'">第一个指令</button><span :style="styleValue">{{message}}</span><br>
<button @click="message2='第2个meassage指令'">第2个指令</button><span :style="styleValue">{{message2}}</span>
<!-- v-for -->
<h3>Vue指令：v-for</h3>
<table border=1>
<caption>通讯录</caption>
<thead>
<tr>
<th>序号</th>
<th v-for="item, key in records[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr v-for="item, key in records" :key="key">
<td>{{1+key}}</td>
<td v-for="e,k in item">{{e}}</td>
<!-- <td></td> -->
</tr>
</tbody>
</table>
<hr>
<h3>Vue对象计算属性的案例</h3>
<br>
单价： <input type="text" v-model="price">
数量：{{num}}
总价：{{totalPrice}}
<button @click="addNum">增加</button>
<button @click="descNum">减少</button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
styleValue: 'background-color: red',
city: '',
text: '文本显示',
html1: '<span style=" color: red; font-style: italic">v-html 显示文本样式事件</span>',
isTrue: true,
isTrue1: true,
message: '',
message2: '',
styleValue: 'color: pink',
price: 10,
num: 1,
records: [
{
name: '蔡蔡',
class: '3班',
gender: '女',
code: '200702'
},
{
name: '蔡小葵',
class: '3-1班',
gender: '女',
code: '2007042'
}
]
}
},
computed: {
totalPrice() {
return this.price * this.num
}
},
methods: {
empty() {
this.city = ''
},
addNum() {
this.num++;
},
descNum() {
this.num--
if (this.num < 0) {
this.num = 0
}
}
},
watch: {
price(newVal, oldVal) {
console.log('new price:', newVal, 'old price:', oldVal)
},
num(newVal, oldVal) {
console.log('new num:', newVal, 'old num:', oldVal);
}
}
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
