<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例</title>
<style>
.active {
color: #f00;
}
</style>
</head>
<body>
<div id="root">
<div>普通文本：{{ message }}</div>
<div v-text="message"></div>
<div v-html="htmlText"></div>
<div v-bind:title="title">动态绑定属性</div>
<div :title="title">动态绑定属性</div>
<button v-on:click="btnHandler">按钮</button>
<button @mousedown="btnHandler">按钮2</button>
<button @click="showMessage(true)">显示消息</button>
<div>方法：{{ reverse() }}</div>
<div>计算属性：{{ reverseText }}</div>
<button @click="toggleShowHide">显示/隐藏</button>
<div v-if="show" class="v-if">这是能够看得见的吗</div>
<div v-else>这是另一个</div>
<div v-show="show" class="v-show">这是能够看得见的吗</div>
<h2>购物车：</h2>
<ul>
<li
v-for="item of cart"
:key="item.id"
>编号：{{ item.id }}，标题：{{ item.title }}，价格：{{ item.price }}</li>
</ul>
<div>
<input type="text" placeholder="请输入内容" v-model="inputValue">
<br>
<input type="text" placeholder="请输入内容" :value="inputValue" @input="inputHandler">
<br>
{{ inputValue }}
</div>
<div :class="{active: isActive}">
动态绑定 class
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
Vue.component('',{
template:`
<div class=''></div>
`
})
const vm = new Vue({
el: '#root',
data: { // 数据
message: '这是一段普通文本',
htmlText: '<input type="radio" />',
title: '这是动态绑定的属性',
show: false,
cart: Array(6).fill(null).map((v, i) => ({
id: i,
title: '商品标题' + i,
price: Math.ceil(Math.random() * 10000) / 100
})),
inputValue: '',
isActive: false
},
computed: { // 计算属性
reverseText() { // getter
return this.message.split('').reverse().join('')
}
},
methods: { // 方法
inputHandler(e) {
this.inputValue = e.target.value
},
reverse() {
return this.message.split('').reverse().join('')
},
btnHandler(e) {
console.log(e)
console.log('点击了按钮')
},
showMessage(isShow) {
console.log('参数：', isShow)
},
toggleShowHide() {
this.show = !this.show
}
}
})
</script>
</body>
</html>
Processed:
0.017, SQL:
9
