vue属性与方法

计算属性
v-model指令——表单的实现
样式绑定

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><!-- 5.3 样式绑定 --><style>.green{color: green;}.red{color: red;}.active{background-color: antiquewhite;color: #2154ae;}.align{text-align: right;}</style>
</head>
<body><div style="border: 1px solid #949494;padding: 20px;margin-top: 10px;"><h2>5.1 计算属性</h2><!-- 当一个属性需要通过计算得到时可以使用计算属性 --><!-- 一个值改变影响多个值，就采用监听属性，而多个值改变影响一个值就可以采用计算属性 --><div id="app1"><p>我是:{{name}}</p><p>我是:{{firstName + lastName}}</p><p>我是:{{name1}}</p><hr><p>价格：{{price}}</p><p>数量：<button @click="sub">-</button><span>{{quatity}}</span><button @click="add">+</button></p><p>折扣：{{discount}}</p><p>总价：{{totalPrice}}</p></div><script>const sx = {data(){return{name: '不蒸馒头曾口气',firstName: '不蒸馒头',lastName: '曾口气',price: 100,quatity: 0,discount: 0.5,totalPrice: 0}},computed: {name1(){return this.firstName + this.lastName;},// totalPrice(){//     return this.price * this.quatity * this.discount;// }},methods: {sub(){this.quatity--},add(){this.quatity++}},watch: {quatity(val){this.totalPrice = this.price * this.quatity * this.discount}}}Vue.createApp(sx).mount('#app1')</script></div><div style="border: 1px solid #949494;padding: 20px;margin-top: 10px;"><h2>5.2 v-model指令————表单的实现</h2><div id="app2"><form action=""><div><label for="">用户名：</label><input type="text" v-model="formdata.username"></div><div><label for="">密码：</label><input type="password" v-model="formdata.password"></div><div><label for="">爱好：</label><select v-model="formdata.hobby"><option value="basketball">篮球</option><option value="football">足球</option><option value="pingpong">乒乓球</option></select></div><div><label for="">性别：</label><label for="">男</label><input type="radio" value="男" v-model="formdata.sex"><label for="">女</label><input type="radio" value="女" v-model="formdata.sex"></div><div><label for="">特长：</label><label for="">计算机</label><input type="checkbox" v-model="formdata.forte"><label for="">唱歌</label><input type="checkbox" v-model="formdata.forte"></div><button>提交表单</button></form></div><script>const bd = {data(){return{formdata:{username: "",password: "",hobby: "",sex: "",forte: []}}}}Vue.createApp(bd).mount('#app2')</script></div><div style="border: 1px solid #949494;padding: 20px;margin-top: 10px;"><h2>5.3 样式绑定</h2><div id="app3"><p :class="c1" @click='c1="red"'>青青草原</p><p :class="{active:ac,align:ac}" @click="ac=!ac">对象语法绑定，样式绑定的是一组对象</p></div><script>let ysbd ={data(){return{c1: 'green',ac: false,}}}Vue.createApp(ysbd).mount("#app3")</script></div></body>
</html>