目录:
1. 插值
2. 指令
3. 过滤器
4. 计算属性及监听属性
由于本节讲解的知识比较简单,就主要体现在代码中了(注释)
1.插值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<title>插值</title>
</head>
<body>
<div id="app">
<ul>
<li>
<h3>文本</h3>
<div v-html="vueHtml"></div>
</li>
<li>
<h3>属性</h3>
<!--
v-bind:与v-model的区别?
v-model是做数据双向绑定的指令
v-bind:只是将对应的值给填写到指定属性中
例如:v-bind:value简单来说就是讲值填写到value=""
然后value的值发生改变,并不会影响Vue实例中变量值
-->
<input type="text" v-bind:value="msg" />
<!-- 简写:v-bind==: 事件用@,绑定用: -->
</li>
<li>
<h3>表达式</h3>
{
{str.substr(0,6).toUpperCase()}}
{
{ number + 1 }}
{
{ ok ? 'YES' : 'NO' }}
</li>
<li :id="'list-' + id">我的Id是js动态生成的</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#app",
data() {
return {
msg: 'hello vue',
vueHtml: '<span style="font-size: 30px;">Vue对html的解析</span>',
str:'http://www.baidu.com',
num