1. v-once --只初始化(渲染)一次，后面的message改变 不会同步改变
<div v-once>{{message}}</div>
2. v-html 内容以html形式展示
-- 定义数据
const app = new Vue({
el:'#app',
data:{
message:"<a href='https://www.baidu.com'>百度</a>"
}
})
-- html 渲染
<div v-html="message"></div>
3. v-pre 标签内 不做任何渲染 直接输出(不解析mesage)
<div v-pre>{{message}}</div> -- {{message}}
4. 条件语句
const app = new Vue({
el:'#app',
data:{
type:95
}
})
-- html渲染
<div id="app">
<h1 v-if="type > 90">优秀</h1>
<h1 v-else-if="type > 80">良好</h1>
<h1 v-else>就这</h1>
</div>
5. 循环语句
const app = new Vue({
el:'#app',
data:{
movies:[
{name:'奥特曼',star:"8.1"},
{name:'何以为家', star:"9.2"},
]
}
})
--html 渲染
<div id='app'>
<p v-for="(value, key) in movies">{{key}} - {{value}}</p>
</div>
6. 动态绑定属性 v-bind
const app = new Vue({
el:'#app',
data:{
imageUrl:'http://www.baidu.com',
isActive:true,
isLine:true,
},
methods:{
btnclick:function(){
this.isActive = !this.isActive
}
}
})
--html
<div id='app'>
<img v-bind:src="imageUrl">
<img :src="imageUrl">
<h1 :class="{active:isActive, line:isLine}">动态绑定class(对象语法)</h1>
<button v-on:click="btnclick">点击变色</button>
<h1 :class="[isActive, isLine]">动态绑定class(对象语法)</h1>
</div>
7. 计算属性 computed
const app = new Vue({
el:'#app',
data:{
myname:"weeds",
},
computed:{
computed_myname:function(){
return this.myname += ' 你好！'
}
}
})
-- html
<div id='app'>
<h1>{{computed_myname}}</h1>
</div>
