1）innerText和innerHTML属性的绑定
使用v-text和v-html标签
<div id="app">
<p v-text="link1"></p>
<p v-html="link2"></p>
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
link1: '<a href="http://www.163.com">网易</a>',
link2: '<a href="http://www.163.com">冈易</a>'
}
}
}).mount("#app")
</script>2）类绑定和样式绑定
首先定义好style标签
.btn1{
width: 100px;
height: 30px;
font-size: 16px;
color:#999;
}
.btn2{
background-color: #0aed30;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-right: 2px solid #666;
border-bottom: 2px solid #666;
}然后挂载的对象中的data中写好想要挂载的样式
data() {
return {
className1:"btn1",
className2:"btn2",
// 可以通过属性值true或false的方式确定是否拥有该属性值
btn1_choose:true,
btn2_choose:false,
style1:{
width:"100px",
height:"30px",
color:"green"
}
}
}首先进行class绑定，写法为:class=""，在原版写法的前面加了一个冒号代表绑定
//获得变量className1的值对应的class，这里获得了btn1
<button type="button" :class="className1">绑定样式</button>
//绑定变量btn1_choose和btn2_choose，当对应的值为true时获得对应的class。这里获得了btn1
<button type="button" :class="{btn1:btn1_choose,btn2:btn2_choose}">绑定对象样式</button>
//数组绑定样式，这里一次绑定了两个，btn1和btn2
<button type="button" :class="[className1,className2]">绑定数组样式</button>
//在绑定数组样式的基础上增加了逻辑运算，这里btn1_choose为true，获得"btn1"，btn2_choose为false，获得""，最后只有btn1的效果
<button type="button" :class="[btn1_choose?'btn1':'',btn2_choose?'btn2':'']">绑定数组样式含逻辑运算</button>接下来进行style绑定，style绑定也可以进行逻辑运算，此处不再赘述。
注意style绑定的目标为对象。
<button type="button" :style="style1">按钮1</button>
<button type="button" :style="[style1,style2]">按钮2</button>3）条件渲染
条件渲染很好理解，就是在标签中写if判断，符合条件就显示，不符合条件就不渲染。
<script>
const { createApp } = Vue
createApp({
data() {
return {
user: {
username: "秦始皇"
}
}
},
methods: {
change() {
if (this.user.username === "admin") {
this.user.username = "guest"
event.target.innerHTML = "切换为Admin"
}else{
this.user.username = "admin"
event.target.innerHTML = "切换为guest"
}
}
}
}).mount("#app")
</script>我们定义了user.username作为判断的依据。
<div id="app">
<p>
<a href="#" v-if="user.username=='admin'">编辑</a>
<a href="#" v-else>详情</a>
</p>
<p>
<a href="#" v-if="user.username=='admin'">编辑</a>
<a href="#" v-if="user.username!='admin'">详情</a>
</p>
<p>
<a href="#" v-show="user.username=='admin'">编辑</a>
<a href="#" v-show="user.username!='admin'">详情</a>
</p>
<p>
<button type="button" @click="change">切换角色为Guest</button>{{user.username}}
</p>
</div>通过这段代码可以看出if和else是分开在两个标签中，可以通过两个相反的判断条件达成相同的效果。v-if和v-show的效果相同。
当user.username发生变化时挂载点内的所有内容会随即更新。
4）列表渲染
列表渲染用v-for实现，类似遍历的写法。
<div id="app">
<ul>
<li v-for="(u,index) in user">
{{index}}-{{u.id}}-{{u.name}}-{{u.age}}
</li>
</ul>
</div>需要的数据user是一个数组，内含有若干个对象。
data() {
return {
user: [{
id:1,
name: "秦始皇",
age:12
},{
id:2,
name: "刘邦",
age:13
},{
id:3,
name: "刘秀",
age:14
},{
id:4,
name: "司马昭",
age:15
}
}
}这样网页上会渲染出四个li，第一个li的index为0。
5）计算属性
computed用于构建计算属性，这里的属性可以是函数或对象。对象的内部应有get()和set(val)两个方法。get是修改本值的方法，set是修改参与计算值的方法，参数val是input的value属性值。配合v-model属性双向绑定可以实现左值右值同时更新的效果。
<div id="app">
姓：<input type="text" v-model="firstName1">
名：<input type="text" v-model="lastName1">
姓名：<input type="text" v-model="username1">
<br><br>
姓：<input type="text" v-model="firstName2">
名：<input type="text" v-model="lastName2">
姓名：<input type="text" v-model="username2">
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
firstName1: "",
lastName1: "",
firstName2: "",
lastName2: "",
}
},
computed: {//用于构建计算属性
username1() {
return this.firstName1 + " " + this.lastName1
},
username2:{
get(){
return this.firstName2 + " " + this.lastName2
},
set(val){
let strArr = val.split(" ")
this.firstName2 = strArr[0]
this.lastName2 = strArr[1]
}
}
}
}).mount("#app")
</script>6）监视属性
监视属性是当一个值发生变化时执行的，用watch构建监视属性。函数名应和被监视的变量名对应，形参名称不可更改。
watch:{
username(newVal,oldVal){
if(newVal != null){
let strArr = newVal.split(" ")
this.lastName = strArr[0]
this.firstName = strArr[1]
}else{
this.lastName = ""
this.firstName = ""
}
}
}